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| PHP 聞 引き ハン ドブ ッ ク 


Web サ イト や Web ア プリ の 開発 に 
よく 使わ れ て いる PHP。 本 書 で は 、 
PHP の 基礎 知識 か ら 基 本 文法 、 セ 
キュ リティ 対策 な ど を 網 的 に 解説 
する 。PHP5.3/5.4 に 対応 。 


ISBNg78-4-86354-109- ら 
A5 判 ・744 頁 
定価 3.200 円 + 税 





i Ruby 逆 引き ハン ドブ ッ ク 


本 書 は 、「Ruby で こう いう 処理 を し 
た いけ ど 、 ど う 記 述 す れ ば いい ?」 を 
逆 引 き で パッ と 引け る リフ ァ レ ンス 
ブッ ク 。 実 践 的 な テク ニッ ク が 満載 。 
Ruby 1.8.6/ 1 .8.7/ 1 .9 の すべ て に 
対応 。 
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CSR 研 究 所 に つい て 


CSR 研 究 所 は 新潟 市 に ある 出版 社 で す 。 ユ 
ニー ク な 社風 や 教育 方 針 は 新聞 や テレ ビ な ど 
で 紹介 され た り し ます 。 詳 細 に つい て は 、 次 の 
Web サ イト で ご 覧 いた だ く こ と が で きま す 。 


WWW. 選 ビー-ー「.COTT1 


また 、 新 潟 本 社 に は の 代目 会 社 犬 [ラッ キー」 
が いま す 。 名 刺 を 持つ 正式 な 社員 と し て 広報 
部 に 勤務 し つつ 、 セ ラビ ピー ドッ グ と し て 社内 の 


メン タル ヘル ス に も 貢献 し て いま す 。 
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田 権 利 に つい て 
e 本 書 に 記述 べ れ て いる 社名 ・ 製 品名 な ど は 、 一 般 に 各 社 の 商標 また は 登録 商標 で す 。 
e 本 書 で は 6、 ⑧⑤ は 割愛 し て いま す 。 


一 本 書 の 内 容 に つい て 

e 本 書 は 著者 . 編 集 者 が 実際 に 操作 し た 結果 を 慎重 に 検討 し 、 著述 編集 し て いま す 。 た だ し 、 
本 書 の 記述 内 容 に 関わ る 運用 結果 に まつ わる あら ゆる 損害 ・ 障 害 に つき まし て は 、 責任 を 
負い ませ ん の で あら か じ め ご 了承 くだ さい 。 

e 本 書 で 紹介 し て いる コー ド の 実行 結果 の 画面 な ど は 、 環境 に よっ て 異な る 場合 が ざ ぎ ざい ます 
の で 、 あら か じ め 、 ご 了承 くだ さい )。 

e 森 書 の 内 容 は 、 2012 年 7 月 現在 の 情報 を 基 に 記述 し て いま す 。 仕様 の 変更 や ブラ ウザ の 
バー ジョ ン ア ッ プ な ど に より 、 サン プル の 動作 が 変わ っ た り 、 プロ グラ ム の 書き 換え が 必要 に 
な っ た り 、 動作 し な く な っ た りす る 場合 が あり ます 。 また 、 紹介 し て いる URL な ども 変更 に な 
る 場合 が あり ます 。 あら か ら じ め 、 ご 了承 くだ さい 


一 サン ブル に つい て 

e 本 書 で 紹介 し て いる サン プル は 、CSH 研 究 所 の ホー ムペ ー ジ (http://Www.C-r.Com) か 
ら ダ ウン ロー ド す る こと が で きま す 。 ダウ ン ロ ー ド 方 法 に つい て は 、 5 ペー ジ を 参照 し て く 
だ さい 。 ' 

e サン プル デー タ の 動作 な ど に つい て は 、 著者 ・ 編 集 者 が 慎重 に 確認 し て お り ま す 。 た だ し 、 
サン プル デー タ の 運用 結果 に まつ わる あら ゆる 損害 ・ 障 害 に つき まし て は 、 責任 を 負い ま 
せん の で あら か が かじ め ご 了承 くだ さい 。 

e サン プル デー タ の 著作 権 は 、 著者 及び CSR 研 究 所 が 所 有 し ます 。 許可 な く 配 布 ・ 販 売 す 
る こと は 堅く 禁止 し ます 。 


@ 木 書 の 内 容 に つい て の お 問い 合わ せ に つい て ( 

この 度 は C&R 研 究 所 の 書籍 を お 買い あげ いた だ きま し て あり が と う ご ざい ます 。 本 書 の 内 容 に 関す る お 
問い 合わ せ は 、 FAX また は 郵送 で 「 書 名 」 該当 する ペー ジ 番号 」「 返 信 先 」 を 必ず 明記 の 上 、 次 の 宛先 ま 
で お 送り くだ さい 。 お 電話 や 電子 メー ル 、 また は 本 書 の 内 容 と は 直接 的 に 関係 の な い 事 柄 に 関す る ご 質問 
に は お 答え で きま せん の で 、 あら か じ め ご 了承 くだ さい 。 
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FAX 025-258-2801 
[JavaScript 逆 引き ハン ドブ ッ ク ] サポ ー ト 係 





中 PRHLHG ロ UE 


今日 、 JavaScript は 、 Web 制 作 に お いて 欠か せな いも の と な り ま し た 。 今や ]avaScript が 使 
われ て いな い Web サ イト を 探す 方 が 大 変 で し ょ う 。 

当初 は フォ ー ム の 人 人 力 チ ェ ッ ク 程 度 に し か 使わ れ て いな か っ た JavaScript が 、 現在 で は 
Web ア プリ ケー ショ ン ま で 担う よう に な っ た の は すご いこ と で す 。 一 時 期 、 TavaScript を 動作 し 
な いよ うに プラ ウザ を 設定 する よう な 時 代 も あり まし た 。 また 、 プラ ウザ 間 の 動作 の 違い に よる 問 
題 に 悩ま され た 時 代 も あり まし た 。 今 で は 、 jQuery な ど 各 種 ラ イブ ラリ の 利用 に よっ て か な り 解 
消さ れ て いま す 。 

そし て 、 JavaScript が 誕生 し て か ら 16 年 、 さま ざま な 困難 を 乗り 越え て 現在 に 至っ て いま す 。 

特に その 原動力 と な っ た の は Ajax( 非 同期 通信 ) 、 そし て HTML5 に よる と ころ が 大 きい で し ょ 
う 。 HTML5 の API を 利用 する こと に より 、 高度 で 複雑 な こと が 簡単 に で きる よう に な り ま し た 。 数 
年 前 は 不可 能 だ っ た こと が JavaScript で 簡単 に で きる よう に な っ て いる の で す 。 た と えば 、 次 の 
よう な 機能 を javaScript か ら 使 うこ と が で きま す 。 

e 位置 情報 

s ど D 画 像 処理 、 GD 描 画 

es ビデ オ 有 再生 / オ ー デ ィ オ 再生 

e 音声 / 波 形 処理 

s カメ ラ 撮 影 / ビ デオ 撮影 / 録 音 

* カメ ラ か ら の リア ル タ イ ムキ ャ プチ ャ ー 

e 並列 処理 

* ファ イル 処理 

s バッ テリ ー や セン サー な ど デ バイ ス 関 係 

* ソケット 通信 (双方 向 通信 ) 

es デー タベース (Key Value Store タ イプ ) 


HTML5 の API で は さま ざま な 機能 や 仕様 が 追加 ・ 定 義 き され 、 多く の ブラ ウザ で 利用 で きる よ 
うに な っ て いま す 。 特に スマ ー ト フォ ン で 利用 で きる と いう の は 、 大 き な ポ イン ト で す 。 

本 書 は 、 最新 の HTML5 の API を 利用 し た サン プル を 数 多く 掲載 し て いま す 。 また 、 avaScript 
の 基本 的 な 処理 や 便利 な TIPS な ども 多数 、 掲載 ~ て いま す 。 

HTML5 は 進歩 が 早い 上 に 仕様 が 確定 し て いな いこ と も あり 、 将来 的 に 動作 し な い 可 能 性 も 
あり ます 。 それ で も 、 現時 点 で 動作 する と いう 点 に お いて 役立つ 部 分 も ある は ず だ と 考え 、 掲載 
し て いま す 。 

本 書 が 読者 の 皆様 の Web 制 作 の 一 助 と な れ ば 幸い で す 。 


2012 年 7 月 
古 許 一 藻 


本 書 に つい て 


則 動作 確認 の 環境 に つい て 
本 書 で は 、 次 の よう な 環境 で 動作 を 確認 し て いま す 。 
e IE 一 8 : Windows XP 
e IE9 : Windows //Windows Phone /.5 
elE10: Windows 8(Release PrevieW) 
e GOOgle Chrome どら 1 : Windows//Mac OS X 10.6/Mac 0S X 10./ 
e Chrome for Android : Android 4.0 
eFirefOox 14 : Windows//Mac 0S X 10.6/Mac 0S X 10./ 
e Firefox(Android 版 ) : Android 4.0 
e Sgfari 5.x : Mac OS X 10.6/Mac 0S X 10./ 
e Sgfari 6 : Mac OS X 10.8 
e Safari(iOS 版 ) : i0S 4/iOS 5.1 
e Android 標準 ブラ ウザ : Android2 ら .3/3.2/4.0 
eODera 11 一 1 : Windows / 


スマ ー ト フォ ン ・ タ ブレ ッ ト に つい て は 、 次 の 機種 で 確認 し て いま す 。 
eS 4/5 : iPhone 4/4S、 iPad ら /New iPad 
e Android 2.3 : Galaxy S/S2、 AQUOS PHONE(SH12C)、XPERIA(SO-01C) 
e Android 3.2 : SDNY Tablet(SGPT 1 1 1JP/S)、 Arrows Tab(F-01D) 
e Android 4.0 : Galaxy Nexus 
e Windows Phone 7.5 : Windows Phone IS1 ら T 


川本 書 の 表記 方 法 

本 書 の 表記 に つい て の 注意 点 は 、 次 の よう に な り ま す 。 
p サン プル コー ド の 中 の 「[\」 (バッ クス ラッ シュ ) と 「\」 (円 記号 ) に つい て 

環境 に よっ て は 、 い |」 (ツク スラ ッシュ ) は 「\」 (円 記号 ) で 表示 され ます 。 本 書 の 誌面 に 掲 
載 し て いる サン プル コー ド で は [\」 で 表記 し て いま す の で 、 必要 に 応じ て 読み 夫 え て くだ さい 。 
な お 、 Unicode で は | \」 と |\」 は 異な る 文字 コー ド に な っ て いま す 。 この た め 、 一 部 の 書体 を 
除き 、|\」 を 「\」 で 入力 する と 動作 し ませ ん 。 
p サン プル コー ド の 中 の 馬 罰 に つい て 

本 書 に 記載 し た サン プル コー ド は 、 誌 面 の 都合 上 、1 つ の サン プル コー ド が ペー ジ を また が っ 
て 記載 され て いる こと が あり ます 。 その 場合 は 還 4 の 記号 で 、 1 つの コー ド で ある こと を 表し て い 
ます 。 


p ブラ ウザ の 対応 バー ジョ ン に つい て 

本 書 で は 項目 の タイ トル 部 分 に 、 プ ラウ ザ の 対応 バー ジョ ン の マー ク を 記載 し て いま す 。 | WP」 
は Windows Phone を 表し て いま す 。 基本 的 に は 記載 し て いる バー ジョ ン 以 降 で その 項目 (メソ ッ 
ド な ど ) が 対応 と な り ま す が 、 一 部 、 例外 が あり ます 。 その 場合 は 、 HINT や COLUMN に 記載 
し て いま す 。 な お 、 薄く 表示 され て いる 場合 は 、 非 対 応 と な り ま す 。 


対応 し て いる こと を 対応 し て いな いこ と を 
意味 し て いる 意味 し て いる 


LChrome Safari 5 」 Firefox 4 Opera 11 
ら に は に は 11EJNN-LEI 





則 サン プル ファ イル の ダウ ン ロ ー ド に つい て 
本 書 の サン プル デー タ は 、C&R 研 究 所 の ホー ムペ ー ジ か ら ダ ウン ロー ド す る こと が で きま す 。 
本 書 の サン プル を 入手 する に は 、 次 の よう に 操作 し ます 。 
ぃ 「http://WwW.C-r.Com/」 に アク セス し ます 。 
@ トッ プペ ー ジ 左上 の 「 商 品 検索 」 欄 に | 108-5」 と 入力 し 、[ 検 索 ] ボ タン を クリ ッ ク し ます 。 
@ 検索 結果 が 表示 され る の で 、 本 書 の 書名 の リン ク を クリ ッ ク し ます 。 
@ 書籍 詳細 ペー ジ が 表示 され る の で 、[ サ ンプ ル デ ー タ ダウ ン ロ ー ド ] ボ タン を クリ ッ ク し ます 。 
⑥ 下記 の 「 ユ ー ザ ー 名 」 と 「 パ スワ ー ド 」 を 入力 し 、 ダウ ン ロ ー ド ペー ジ に アク セス し ます 。 
⑬ 「 サ ンプ ル デ ー タ 」 の リン ク 先 の ファ イル を ダウ ン ロ ー ド し 、 保存 し ます 。 
サン プル の ダウ ン ロ ー ド に 必要 な 
ユー ザー 名 と バル スワード 
89gh 
F6h3 モ 







※ ユ ー ザ ー 名 ・ パ スワ ー ド は 、 半角 英 数 字 で 入力 し 
て くだ さい 。 また 、「J」 と 「j」 や 「K」 と 「k」 な どの 
大 文字 と 小文字 の 違い も あり ます の で 、 よく 確 
認 し て 入力 し て くだ さい 。 





則 サン プル コー ド の 利用 方 法 

サン プル ファ イル は 、 CHAPTER ご と の フォ ル ダ の 中 に 、 項目 番号 の フォ ル ダ に 分 か れ て い 
ます 。 サン プル は ZIP 形 式 で 圧縮 し て あり ます の で 、 解凍 し て お 使い くだ さい 。 

それ ぞ れ の フォ ル ダ 内 に は 、HTML フ ァイル や JavaScript フ ァイル 、 CSS フ ァイル な ど が 保存 
され て いま す 。 


な お 、 サン プル に よっ て は 、 ロー カル ディ スク 上 (HTML フ ァイル を 直接 、 プラ ウザ で 開く 方 法 ) 
で は 動作 し な い 場合 が あり ます 。 その 場合 は 、 動作 の 確認 を 行う に は ネッ トワ ー ク 環境 (Web 
サー バー 上 ) で 確認 し て くだ さい 。 Web サ ー バ ー に つい て は 、 ロ ー カ ル サ ー バ ー で も 構い ませ ん 。 

また 、 本 書 の サン プル で は 、 主 に 「addEventListener() 」 メ ソ ッ ド を 使っ て いま す 。 IE6 一 
8 で は 「addEventListener() 」 メ ソ ッ ド が な いた め 、 その まま で は 動作 し ませ ん 。 IE6 一 8 で は 、 
「attachEvent() 」 メ ソ ッ ド を 使う よう に 書き 換え る 必要 が あり ます (400 ペ ー ジ 参照 ) 。 
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ロロ 1 JavaScript の 概要 一 に に 38 

ロ 日 錠 _ JavaScript の 業 本 事項 | 上 ※ ネ ホ め † ュ = ミ ピ ヨ ぽ ニ デビ ドド ドド ee 40 

口 口 コ 演算 子 に つい て が 90 ちる 0: るる が: が:@i が 6 る 泊 %66 の 6 の を な る 0: を 66 生み.6 る ee 42 
ロロ LUMN 画 予 約 語 に つい て 

ロロ ノイ リテラ 人 丁 50 で ii…nei 人 eee 45 

口 ロ 5 strict モ ー ド と バー ジョ ン の 指定 に つ U い て ビー ドー 46 

ロロ 司 コメ ント に つい いで 人 敢 太い な て stE あ ass 49 

ロロ ロワ 変数 と 定数 に つい て て 入 ……iー ド 51 
ビ ロ LUMN 軒 COnSt で の 不具 合 

円 口 碧 雑 り 層 し, 地 欄 (し ループ) に つじ 0 54 
C ロ LUMN 画 DOM を 繰り 返し 操作 する 場合 

CS 科 叶 人 夫 記入 eeohteePvSSdketzapesN2920xpieepywai 58 
ロロ LUMN 血 配列 / ハ ッシュ を 利用 する 

口 1 口 関数 の 定義 9 が で で す も る ある る も ある すす の: 法 の な を する まる 9 入る 6 な を る する な る な ゃ な Seeie る の 62 

口 11 関数 の バラ メー タ の 読み 出し に つて 一 oeoerern 64 

品 1 ら [this」 キー ワー ド の 固定 に つい て 和 ーー)ーooioioroerernmr 66 

口 13 例外 処理 に つい ii ドド ime 68 

口 1 オイ イベ ント 処 理 に つい て ーー トー 71 
ビ ロ LUMN 画 IE6 一 8 で の イベ ント 設定 

口 1 う ら ドキ ュ メ ント オブ ジェ クト モデ ル に つて iiioeooeeeenern 74 

口 16 文字 別 や オブ ジェ クト を 評価 する 上 …… デ ミド ーー… ピ ニ ーー ドド ドド ドー…ー 78 


ロ NEP ロ INT 箇 式 や 文 の 評価 を 行う に は |「 eval()」 メ ソ ッ ド を 使う 
ロロ LUMNI 画 ビル トイ ン オ ブ ジ ェクト 


1 ウツ 炒 個 か どう つか 調べ る の 80 
ロ NEPINT 生 数値 か どう か を 調べ る に は 「iSNaN() 」 メ ソ ッ ド を 使う 
ロロ LUNMN 年 整数 値 か ど つ か 調べ る 


口 1 日 文字 別 を エス ケー プ 化 / エ ンコ ー ド / デ コー ド す る …" に ririiiim 82 


ロ NEP ロ INT 罰 文字 を エス ケー プ 化 する に は 「escape()」「encodeURI()」 
[encodeURIComponent() 」 関 数 を 使う 


口 19 数 値 に 変換 する / 数 値 の 単位 を 削除 する 上 …… 〇 (… つ 〇 の ……… の (ii 84 
ロ NEPINT 箇 文字 を 数 値 に 変換 する に は 「parselnt()」 メ ソ ッ ド や 
[parseFloat() 」 メ ソ ッ ド を 使う 


ビ ロ LUMN 画 |ev ヨ l()」 メソッド で 文字 を 数 値 に 変換 する 
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ロロ JavaScript の デー タ を JSON 形式 に 変換 する … で oo 86 
ロ NEPDINT 還 JavaSCriDt の デー タ を JSON 形式 に 変換 する に は 
[JSON.stringify O」 メ ソ ッ ド を 使う 


の 1 JSON 形式 か ら オ ブ ジ ェ ク ト に 変換 する が 88 
ロ NEPDINT 還 JSON 形式 か ら オ ブ ジ ェクト に する に は 「JSON.parse()」 メ ソ ッ ド を 使う 
ロロ LUNMN 画 |0C ヨ 1 StOrage と JSON 


口 の 2 オブ ジェ クト を 生成 する る も する ほす る も 6 1 90 
ロ NEPDINT 還 オブ ジェ クト を 生成 する に は 「new Object(」 と する か 「| | を 使う 
ロロ LUNMN オ ブ ジ ェクト の 生成 速度 


ロロ 2 ら コ 3 指定 され た オブ ジェ クト を 継承 し て 新た な オブ ジェ クト を 生成 する … 92 
ロ NEP ロ INT 箇 オブ ジェ クト を 継承 し 新た な オブ ジェ クト を 生成 する に は 
[Object.create ()」 メ ソ ッ ド を 使う 


ロイ オブ ジェ クト の イン スタ ンス を 調べ る ……… ひ oreoeeernereerrr 94 
ロ NEP ロ INT 量 どの オブ ジェ クト か ら 派 生 し た の か 調べ る に は 
[instanceof] 演算 子 を 使う 
ロロ らら オブ ジェ クト の 内 容 を 読み 出す 上 … の ooiiiiiorooeooeorerererererrere 96 


ロ NEP ロ INT 生 オブ ジェ クト の 内 容 を 読み 出す に は 「for.……in」 文 を 使う 
ロロ LUMN 画 |i ロ | 漂 算 子 を 使っ て プロ パテ ィ が ある か 調べ る 


2 ナチ 1 ト タ イ プ を 利用 する ee の でも ずる oi Io 9 ん あ 9 や Ai 和枝 ぷち (6 の 85 5 eo む ゃ ゃ 98 
ロ NEP ロ INT 晶 プロトタイプ を 利用 する に は 「prototype」 を 使う 
の リプ プロ リ \ テ ィ の 属性 値 を 設定 e 取得 する あみ so な ts 100 


ロ NEPDINT 箇 プロ バ パティ の 属性 値 を 設定 する に は 「 オ ブ ジ ェクト 名 . プ ロ パ ティ 名 = 内 容 」、 
取得 する に は 「 オ ブ ジ ェクト 名 . プ ロ パ ティ 名 」 と する 


ロク 日 オブ ジェ クト の プロ パテ ィ の 読み 出し ・ 書 き 込 み 処 理 を 設定 する …102 
ロ NIEP ロ INT 箇 オブ ジェ クト の プロ パテ ィ の 読み 出し ・ 書 き 込 み 処 理 を 設定 する に は ' 
「Object.create()」[Object.defineProperty () 」 メ ソ ッ ド な ど を 使う 


口 ら りう オブ ジェ クト の 変更 を 禁止 する 上 … ireeereereerrerrrerrrr 104 
ロ NEP ロ INT 箇 オブ ジェ クト を 保護 する に は |freeze)」 メ ソ ッ ド を 使う 
口 コ ヨロ プロ パテ ィ の 追加 を 禁止 する ……… の iieereeenrrm 106 


ロ NEPDINT 重 プロ パテ ィ の 追加 を 禁止 する に は 
「preventExtensions()」 メ ソ ッ ド を 使う 


口 コ 1 オブ ジェ クト の 変更 ・ 拡 張 な ど が 可能 か 調べ る …0rrirrroo oo olio 108 
ロ NEP ロ INT 箇 オブ ジェ クト が 拡張 可能 か 確認 する に は 「iSExtensible」 プ ロ パ ティ を 使う 
口 コ ジ オブ ジェ クト の プロ \ テ ィ 一 覧 を 取得 する (が (1 110 


ロ NEP ロ INT 量 オブ ジェ クト の プロ パテ ィ 一 覧 を 取得 する に は 
「keys() 」 メ ソ ッ ド と 「getOwnPropertyNames()」 メ ソ ッ ド を 使う 


口 ヨ ヨ オブ ジェ クト の 種類 を 調べ る …… 〇 上 つ eiioioeooeererrrrr 112 
ロ NEPDINT 呈 オブ ジェ クト の 種類 を 調べ る に は 「typeofl 演算 子 を 使う 
口 ヨ 4 プロ パテ ィ の オー ナー か どう か 調べ る ……0……"rroireerererrrr 114 


ロ NEPDINT 重 プロ パテ ィ の オー ナー か が かど つ か 調べ る に は 
[hasOwnProperty() 」 メ ソ ッ ド を 使う 
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口 コ 5 [Boolean」 オ ブ ジ ェクト を 生成 する の 衝 ee ぶる 学 す る き 合 二 る 技 共 が ま ら る 守 人 交 ま まお な な 6.es す る き * 116 
ロ NEPINT 四 [Boolean]」 オ ブ ジ ェクト を 生成 する に は 「new Boolean()」 と する 
口 コ 6 プロ リ \ テ ディ や オブ ジェ クト を 削除 する 生生 5 人 117 


ロ NEPDINT 箇 オブ ジェ クト を 削除 する に は 「nulll」 を 代入 、 
プロ パテ ィ を 削除 する に は 「delete」 演 算 子 を 使う 


HAPTER 口 コ 葉 避 彰 


口 コ ワ 配列 オブ ジェ ク ト を 生成 する ro の 衝 ま か の か の の まる 25 で 本 科 さ epbsiae あ を も い eee 120 
ロ NEPDINT 備 配列 を 生成 する に は 「new Array()」 や 「 日 」 を 使う 

口 コ 日 指定 し た ビッ ト 長 の 配列 を 生成 する を の の も 二 人 e 層 あお る か を る も ee eere s 122 
ロ NEP ロ INT 箇 ビッ ト 長 を 指定 し て 配列 要素 を 生成 する に は 「Typed Array」 を 使う 

ロコ 9 配列 同士 や 配列 要素 を 連結 する 上 ……0①t 灰 ベ ド ム ( い ー の (つめ … ヨ ニー ド ーーーーーーー… 124 


ロ NEP ロ INT 重 配列 同士 を 連結 する に は 「concat() 」 メ ソ ッ ド 、 
配列 要素 を 連結 する に は 「join()」 メ ソ ッ ド を 使う 


ビ ロ LUMNIE6 で 高速 に 文字 列 を 連結 する 


ロロ 4 ロロ 配列 要素 を 抜き 出す で ld ドド eeenereeeeeeee 126 
ロ NEP ロ INT 箇 配列 要素 を 抜き 出す に は 「slice()」 メ ソ ッ ド を 使う 

ロイ 1 配列 要素 を 抽出 ・ 挿 入 す る 上 上 つ Cll〔 つ …i ド ieoeooeneer 128 
ロ NEP ロ INT 軒 配列 要素 を 抽出 ・ 挿 入 す る に は 「splice()」 メ ソ ッ ド を 使う 

ロス 42 ら 2 条件 を 満た す 配列 要素 を 調べ る …… 〇 上 〇 ({ 人 に 和 に 中 に ーー バー 130 


ロ NEPINT 箇 配列 要素 が 条件 を 満た し て いる か 調べ る に は 
「every() 」 メ ソ ッ ド や 「some () 」 メ ソ ッ ド を 使う 


口 イ つ 配列 要素 を 順番 に 処理 する まま の ea まさ びき ee の e を ao は 。 132 
ロ NEPDINT 中 配列 要素 を 順番 に 処理 する に は 「forEach() 」 メ ソ ッ ド を 使う 
ビ ロ LUMN 血 重複 し て いる 要素 を 排除 する に は 


ロイ 用 配列 要素 を 検索 す る こつ 6 所 134 
ロ NEP ロ INT 重 配列 要素 を 検索 する に は 
[indexOf()」 メ ソ ッ ド や 「lastIndex0f() 」 メ ソ ッ ド メソ ッ ド を 使う 


ロイ 5 配列 か どう か 調べ る 0 あき 8 いあ すがる ま る の 6 な 136 
ロ NEPDINT 重 配列 か どう か 調べ る に は 
[instanceofl 演 算 子 や [Array.isArray() 」 メ ソ ッ ド を 使う 


ロ 46 配列 要素 の 総数 を 求め る … 必 や の …… で ドド た 入 mmrroeetsteroe・ 138 
ロ NEP ロ INT 重 配列 の 要素 数 を 調べ る に は 「length」 プロ パテ ィ を 使う 
ビ ロ LUNMN 画 連想 配列 も 含め た 要素 数 を 求め る に は 


ロロ 47 配列 要 乗 を 加工 する … ぐ 〇 ぐ 性 償 人 ロロ Gi 140 
ロ NEP ロ INT 是 配列 要素 を 加工 する に は 「map()」 メ ソ ッ ド を 使う 
ロロ 4 日 配列 要素 を 追加 ・ 削 除 す る … 層 …… ド ドド eeereeesrrees 142 


ロ NEP ロ INT 重 配列 の 未 尾 に 要素 を 追加 する に は 「push()」 メ ソ ッ ド 、 
未 尾 の 要素 の 削除 を 行う に は 「pop() 」 メ ソ ッ ド を 使う 


ビ ロ LUMN 画 任意 の 位置 に 要素 を 追加 する に は 
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ロ 4 オ 9 配列 要素 を 前 方 また は 後方 か ら 処 理 す る …… iu の mn 144 
ロ NEPDINT 号 要素 を 先頭 か ら 処 理 す る に は |「reduce()」 メ ソ ッ ド 、 
未 尾 か ら 処 理 す る に は 「reduceRight() 」 メ ソ ッ ド を 使う 


口 5 口 配列 要素 を ソー ト す る ……‥ ド oo 146 
ロ NEPOINT 箇 要素 を ソー ト す る に は 「sort(」 メ ソ ッ ド を 使う 

口 ら 1 配列 要素 を 逆順 に する 一 er 148 
ロ NEPDINT 重 配列 要素 の 順序 を 逆順 に する に は 「reverse」 メ ソ ッ ド を 使う 

品 ら 2 配列 要素 内 容 を 前 方 / 後 方 に ば せら す …" ぐ だ ( 上 mrnrrrrrrr 149 


ロ NEP ロ INT 量 配列 内 容 を 前 方 に 移動 ご せる に は | shiftU」 メ ソ ッ ド 、 
後方 に 移動 ご せる に は 「unshift() 」 メ ソ ッ ド を 使う 


P ロ LUMN 血 配列 内 容 を ロー テー ショ ン さ せる 
すら 配列 要素 を 文字 列 に 変換 す と EPCPPEPEPPEPPTPPPPPPPPEPPPPPCPPPEPPPCPPCEPPEPTYYTE 151 


ロ NEPDINT 重 配列 要素 を 文字 列 に 変換 する に は 
[toString() 」 メ ソ ッ ド や 「JSON.stringify ()」 メ ソ ッ ド を 使う 


ピロ LUMN 画 配列 オブ ジェ クト の 生成 時 間 


口 避 4 イ [WeakMap」 オージェ ト を 生成 する で いで ザー ツイ ペン ピン イー 153 
ロ NEP ロ INT 重 [WeakMap]」 オ ブ ジ ェクト を 生成 する に は 「new WeakMap()」 と する 

口 ら ら WeakMap で 該当 する キー が ある か 調べ ベ る oo 155 
ロ NEP ロ INT 生 WeakMap で キー の 有無 を 調べ る に は 「has0」 メ ソ ッ ド を 使う 

口 呈 司 WeakMap の キー を 削除 する ae: 157 


ロ NEP ロ INT 箇 キー の 削除 を 行う に は 「delete()」 メ ソ ッ ド を 使う 


還 き WS 騰 m 引 釣人 邊 ・ 数 学 


口 1 ey [Number」 オ ブ ジ ェ ク ト を 生成 する キア 160 
ロ NEP ロ INT 重 [Number」 オ ブ ジ ェクト を 生成 する に は 「new Number)」 と する 
P ロ LUNMN 画 虚数 に つい て 


口 選 数 値 の 桁 数 を 指定 す る あや 生生: の が 162 
ロ NEP ロ INT 重 桁 数 を 指定 する に は 「toPrecision()」 メ ソ ッ ド を 使う 

口 ら 9 数 値 を \ 数 点 以 下 n 桁 に する esseo も も る る も ss も る る で る も も も 9 る る みる も も る お る る の る eeeece る る ゃ 163 
ロ NEP ロ INT 重 小数 点 以 下 の 桁 数 を 指定 する に は 「toFixed)」 メ ソ ッ ド を 使う 

口 ら 口 3 桁 ご と に 区 切る 音量 や に し 人 R で す ) ヤッ ルイ 164 
ロ NEP ロ INT 生 3 桁 ご と に 区 切る に は 数 値 を 文字 列 に 変換 し て 「.」 を 連結 する 

ロ 6 1 数 値 を 指定 桁 数 に し て 不足 分 を 先頭 か ら 「0] で 埋め る ot 166 
ロ NEP ロ INT 重 不足 分 の 杵 を TO」 で 埋め ゆる に は 「slice0」 メ ソ ッ ド を 使う 

ロ 62 小数 部 分 と 整数 部 分 を 分 け て 取り 出す …… omoro 168 


ロ NEPDINT 重 小数 部 分 と 整数 部 分 を 分 ける に は 文字 型 に 変換 し た 後 で 
[split()」 メ ソ ッ ド で 分 割 す る 


口 ら ヨコ 使用 可能 な 最大 値 / 最 \ 値 を 取得 する ro"o_oreoeoeeereerererrrnrrrrrrrmn 170 
ロ NEP ロ INT 量 扱え る 値 の 最大 値 を 取得 する に は 「Number.MAX_VALUE」、 
最小 値 を 取得 する に は 「Number.MIN_VALUE」 を 使う 
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演算 誤差 を 基 ら す …… に で eee 171 
ロ NEP ロ INT 政 演算 誤差 を 減ら す に は いっ た ん 整数 に し て 演算 する 
大 きか な 数 値 同士 の 演算 を 行う WHO 村人 め 逢 9re な 173 


ロ NEP ロ INT 置 止 し い 演 算 結 果 を 得る に は BigDecimaljs ラ イブ ラリ を 利用 する 
CE ロ LUMN 箇 BiEDecila.jS の 演算 メソ ッ ド 


ビッ ト 演算 を 行う かる 0. の 9 0 177 
ロ NEPDINT 箇 ピット 演算 を 行う に は ビッ ト 演 算 子 を 使う 

絶対 値 を 求め る ei や る あさ ③ る る る らち ちる 必 め あ ' 補 6 なら 00. 表 潜 僅か V の の る 0 する e SS た た っ SUK ら 全 。。 お 。 179 
ロ NEP ロ INT 下 絶対 値 を 求め る に は 「Math.abs() 」 メ ソ ッ ド を 使う 

値 を 比較 す る 9 昌和 0 定 宮本 ( 写 "写生 ( 和 0 180 


ロ NEPDINT 重 値 の 比較 を 行う に は 「Math.min() 」 メ ソ ッ ド や 
| Math.max() 」 メ ソ ッ ド を 使う 


三角 関数 で 計算 する …… 〇 呈 ……… ーー ドド oe 181 
ロ NEPINT 箇 三角 関数 を 取得 する に は 「Math.sin() 」 メ ソ ッ ド や 
「Math.cos() 」 メ ソ ッ ド な ど を 使う 


円 周 率 を 求め る cc: 183 
ロ NEPD ロ INT 箇 円 周 率 を 扱 つ に は | Math.PI」 を 使う 
ビ ロ LUMN 還 度 (degree8) と ラジ アン (radian) を 変換 する に は 


四 捨 五 央 / 切 り 捨 て / 切 り 上 げ を 行う 半生: お 光生 184 
ロ NEP ロ INT 重 四捨五入 を 行う に は 「Math.round()」 メ ソ ッ ド 、 

切り 捨て を 行う に は 「Math.floor() 」 メ ソ ッ ド 、 

切り 上 げ を 行う に は 「Math.ceil()」 メ ソ ッ ド を 使う 
ビ ロ LUMNI 画 その 他 の 切り 捨て 方 法 


自然 対数 の 値 を 求め る ーー 186 
ロ NEP ロ INT 邊 自然 対数 の 値 を 求め る に は [Math.Iog() 」 メ ソ ッ ド や 
[Math.E」「Math.LN2」「Math.LN10」 を 使う 


ロロ LUMN 画 克 が 10 の 場合 の 対数 と 底 が ら の 場合 の 対数 を 求め る に は 


の 累乗 を 求め る を が: 188 
ロ NEP ロ INT 時 6 の 累乗 を 求め る に は 「Math.exp()」 メ ソ ッ ド を 使う 

べき 乗 を 求め る (人 梁 ( あ あ 人 き 当 @ 沼 も 9 党 す すき る 湊 本 な. の る を もせ も ゃ 0 に た 63 も 8 油 ee 。 189 
ロ NEP ロ INT 量 べき乗 計 算 を 行う に は 「Math.pow() 」 メ ソ ッ ド を 使う 

平方 根 を 求め る NYXWKYXXAYCWYECRXSYYYK7XXYY て WAY すす ドア を すい タツ アル ザイ すい マー ッッ マサイ シッ 190 
ロ NEP ロ INT 箇 平方 根 を 求め る に は [Math.sqrt() 」 メ ソ ッ ド を 使う 

各 数 を 求め る fp で で も も すぐ する ぐも 美江 も 富 を る で の 0 の Wa まさ な 0 も が 人 あな る なす ち が る 4839 二 2 ya e 191 


ロ NEP ロ INT 署 征 数 を 求め る に は 「Math.random() 」 メ ソ ッ ド を 使う 
ロロ LUMN 箇 整数 値 の 乱数 を 求め る に は 
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「String]」 オ ブ ジ ェクト を 生成 する / 文 字 列 を 連結 する ……………… 194 
ロ NEPDINT 箇 [String] オ ブ ジ ェクト を 生成 する に は 「new String0」 や 「"」、「」 を 使う 

ビ ロ LUMN 画 サロ ゲー ト ベ ア の 文字 

ロロ LUMN 画 ti- | コー ド 表 


文字 列 の 長 さ を 求め と CCCCEPPPPPPCPEPPPEPPPPPPPPPYPPEEPPPEPEPCPPPPECYEYE 197 
ロ NIEPDINT 箇 文字 列 の 長 さ を 求め る に は 「length] プ ロ パ ティ を 使う 
文字 と 文字 コー ド を 変換 する の eeeioerrerereerrrrrrrrrrrn 198 


ロ NEPINT 箇 文字 を 文字 コー ド に 変換 する に は 「charCodeAt(」 メ ソ ッ ド 、 文字 コー 
ド を 文字 に 変換 する に は [String.fromCharCode () 」 メ ソ ッ ド を 使う 
ロロ LUMNI 画 文字 コー ド に つい て 


文字 列 | を 検索 す る np 200 
ロ NEPDINT 箇 文字 列 の 検索 を 行 つ に は 
「indexOf() 」 メ ソ ッ ド や 「lastIndexOf() 」 メ ソ ッ ド を 使う 


文字 を 取り 出す 0 202 
ロ NEP ロ INT 年 文字 を 取り 出す に は 「charAt() 」 メ ソ ッ ド を 使う 
ロロ LUMN 画 文字 を 文字 コー ド で 取得 する に は 


文字 列 を 指定 文字 で 分 害する …… の eee 204 

ロ NEP ロ INT 箇 文字 列 を 指定 文字 で 分 割 す る に は |「split()」 メ ソ ッ ド を 使う 

指定 午 囲 の 文字 を 抜き 出す 合志 本 0 206 

ロ NEP ロ INT 下 文字 列 を 抜き 出す に は 「substring() 」 メ ソ ッ ド や 「slice(」 メ ソ ッ ド 、 
[substr()」 メ ソ ッ ド を 使う 

英文 字 の 大 文字 / \ 駐 字 に 変換 する に 208 


ロ NEPINT 邊 英文 字 を 小文字 に 変換 する に は 「toLowerCase()」 メ ソ ッ ド 、 
大 文字 に 変換 する に は 「toUpperCase()」 メ ソ ッ ド を 使う 


ビ ロ LUMN 箇 全角 数 字 を 半角 数 字 に 変換 する 


文字 列 の 前 後に ある 空白 を 削除 する …… の ori oiieineninrn 210 
ロ NIEP ロ INT 箇 文字 列 の 前 後 の 空 白 を 削除 する に は [trim())」 メ ソ ッ ド を 使う 


千 定 の 文字 列 を 削除 する 0 直交 和 ( 人 3 の す 1 
ロ NEP ロ INT 重 文字 列 を 削除 する に は 「split()」 メ ソ ッ ド の パラ メー タ に 

削除 し た い 文 字 を 指定 する 
C ロ LUNMN 画 文字 列 の 数 を カウ ント する 


[RegExp」 オ ブ ジ ェクト を 生成 する 
ロ NEP ロ INT 重 [RegExp」 オ ブ ジ ェクト を 生成 する に は 「new RegExpD0」 と する 
ロロ LUMN 血 直 規 表現 文字 の 一 覧 


正規 表現 を 使っ て 文字 を 検索 する ……" ぐ で eeeooeeemmm 216 
ロ NEP ロ INT 量 正規 表現 を 使っ て 検索 する に は 「match(O」 メ ソ ッ ド を 使う 
正規 表現 を 使っ て 文字 を 置換 する 上 … 上 … の (< へ つ io 218 


ロ NEP ロ INT 重 正規 表現 を 使っ て 文字 を 置換 する に は |「replace)」 メ ソ ッ ド を 使う 
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IIIIIIIIIIE NTENIT 昌 上 上 上 上 上 上 IIIIIHIIIIIIIIIIIIIIIIIIIIIIIIIIIHIIIIIIIIIIIIIHIIIIIIIIIIIIIII 


本 パニ こ 国 呈 = 日 付 ・ 時 刻 





口 9 口 「Date | オブ ジェ ク ト を 生成 する で や の 222 
ロ NEPDINT 置 日 付 を 扱う に は 「Date」 オ ブ ジ ェクト を 使う 
口 コ 1 日 付 を 求め る 本  0( 人 0!)6: 沿 間 二 224 


ロ NEP ロ INT 箇 日付 を 読み 出す に は 「getYear() 」 メ ソ ッ ド や 
[getDate()」 メ ソ ッ ド な ど を 使う 


口 ジ 時 刻 を 求め る 0 ン イン マタ て キイ アセ も イアン で トー 226 
ロ NEPINT 箇 時 刻 を 読み 出す に は 「getHours() 」 メ ソ ッ ド や 
「getMinutes()」 メ ソ ッ ド を 使う 


ロロ LUMN 画 JavaSCriDt の 「Date」 オ ブ ジ ェクト で 扱え る 日 付 の 限界 
口 コ 協定 世界 時 の 日 付 を 求め る で うま TY イ イ バル イサ て ベツ マイ イア 228 


ロ NEP ロ INT 息 協定 世界 時 を 読み 出す に は 「getUTCFuIIYear() 」 メ ソ ッ ド や 
|「getUTCDate()」 メ ソ ッ ド な ど を 使う 


ビ ロ LUNMN 画 グリ ニッ ジ 標 準 時 


口 ロ 4 イ 協定 世界 時 の 時 刻 を 求め る で PC と テツ アイ で スパ レプ で チャー を 230 
ロ NEPINT 重 協定 世界 時 の 時 刻 を 読み 出す に は 「getUTCHours() 」 メ ソ ッ ド や 
[getUTCMinutes()」 メ ソ ッ ド な ど を 使う 


ロロ 95 1970 年 1 月 1 日 午前 0 時 0 分 0 秒 か ら 指 定時 まで の 


経過 ミリ 秒 を 求め る ………… 232 
ロ NEPDINT 入 経過 ミリ 秒 を 取得 する に は 「Date.now()」 や 「getTime() 」 メ ソ ッ ド を 使う 
口 ロ らら 日 付 を 設定 する Pr 234 
ロ NEP ロ INT 年 日 付 を 設定 する に は 
[setFullIYearO」「setMonth()」「setDate()」 メ ソ ッ ド を 使う 
口 ロ が 時 刻 を 設定 す る で ドー ザー 236 


ロ NEP ロ INT 年 時 刻 を 設定 する に は 「setHours() 」 メ ソ ッ ド や 
「setMinutes()」 メ ソ ッ ド な ど を 使う 


口 ロ 己 協定 世界 時 の 日 付 を 設定 する の 二 放 かす すす の ある が か で 生 な る 凍る o あ も ono る 238 
ロ NEP ロ INT 看 協定 世界 時 の 日 付 を 設定 する に は 「setUTCFuIIYear()」 
[setUTCMonth(0)」「setUTCDate () 」 メ ソ ッ ド を 使う 


ロロ 99 協定 世界 時 の 時 刻 を 設定 する / 時 差 を 求め る …… 240 
ロ NEP ロ INT 和 協定 世界 時 の 時 刻 を 設定 する に は 「setUTCHours()」 
[setUTCMinutes()」 メ ソ ッ ド な ど を 使う 


1 口 口 さま ざま な 日 付 や 時 刻 の 形式 に 変換 する ……… パ ド ti ボド ーー…ー……… 242 


ロ NEPDINT 生 地域 に 合わ せ た 日 付 と 時 刻 を 取得 する に は 「toLocateDateString() 」 
メソ ッ ド や 「toLocaleTimeString() 」 メ ソ ッ ド を 使う 


すす | 記 ) 1 グリ ニッ ジ 標 準 時 を 求め る の 244 
ロ NEP ロ INT 下 グリ ニッ ジ 標 準 時 を 求め る に は 「toGMTString() 」 メ ソ ッ ド を 使う 
ロロ LUMN 画 (GMT な の に UTC と 表示 され る 


| 間 生 も ン . 日 付 情報 を JSON 形式 に 変換 する タス タイ ) キマ は こい シル リン 246 
ロ NEP ロ INT 年 日 付 を JSON 形式 に 変換 する に は 「toJSON() 」 メ ソ ッ ド を 使う 
ビ ロ LUNMN 画 JSON に つい て 
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1 口 コ 


1 ロロ 人 4 


まき まっ 


1 ロロ 6 


ま 作 まま が 


1 品 


画 呈 We 馬 加 4 ブラ ウザ オブ ジェ クト 


ブラ ウザ 名 や り ドー ジョ ン な を 取得 す る 6 250 
ロ NEP ロ INT 還 ブラ ウザ に 関す る 情報 を 取得 する に は 「navigator」 オ ブ ジ ェクト を 使う 
ロロ LUMN ブ ラウ ザ を 判別 する に は 


Java や Geolocation な どの 機能 が 使え る か どう か 調べ る ………… 252 
ロ NEP ロ INT 重利 用 で きる 機能 の チェ ッ ク を 行う に は オブ ジェ クト の 存在 を 確認 する 
接続 回 線 の 種類 を 調べ る 253 


ロ NEPDINT 生 接続 回 線 の 種類 を 調べ る に は 
[navigator.Cconnection.tyDe」 プロ パテ ィ を 使 つ 


ヒス トリ ー 数 を 求め る 0 人) 255 
ロ NEPINT 箇 ヒ スト リー 数 を 取得 する に は 「history」 オ ブ ジ ェクト の 

[length] プロ パテ ィ を 使う 
ペー ジ を 進め る / 戻 す 2 256 


ロ NIEP ロ INT 還 ヒス トリ ー 間 で ペー ジ を 移動 する に は 
[back()」「forward()」「goO」 メ ソ ッ ド を 使う 


ヒス トリ ー を 追加 置換 する YY 258 
ロ NIEP ロ INT 軒 ヒス トリ ー を 追加 する に は 「pushState()」 メ ソ ッ ド 、 
置換 する に は 「replaceState()」 メ ソ ッ ド を 使う 


画面 の サイ ズ を 求め る 生か ペー シセ 261 
ロ NEP ロ INT 重 モニ タ 画 面 の サイ ズ を 調べ る に は 「screen] オ ブ ジ ェクト の 
[width」 プロ パテ ィ や 「height」 プロ パテ ィ を 使う 


ロロ LUMNI マ ル チ モ ニタ の 場合 


画面 の 色 深 度 を 求め る … oi rr 263 
ロ NEP ロ INT 呈 画面 の 色 深 度 を 調べ る に は 「screen]」 オ ブ ジ ェクト の 
[colorDepth」 プ ロバ ティ を 使う 


画面 の 解 像 度 を rlirirtitctrt 265 
ロ NEP ロ INT 征 画面 の 解像度 を 調べ る に は 「deviceXDPI] プロ パテ ィ や 
「deviceYDP|| プロ パテ ィ 、「devicePixelRHatio] プロ パテ ィ を 使う 


か ンド ウ の 幅 を 求め る 8 267 
ロ NEP ロ INT 暑 ウィ ンド ウ 幅 を 求め る に は 「outerWidthl」 |outerHeight」 
「innerWidth」「innerHeight| プロ パテ ィ を 使う 


指定 位置 まで スク ロー ル さ せる る な サ も ee0.9 ee 義 る 6 269 
ロ NEP ロ INT 生 ペ ー ジ 内 容 を スク ロー ル さ せる に は 「scrollTo0」 メ ソ ッ ド や 
[scrolIBy()」 メ ソ ッ ド を 使う 


ロロ LUNMN 箇 スマ ー ト フォ ン で アド レス バー を 隠す 


Base54 エ ンコ ー ド / デ コー ド す る で あき 272 
ロ NEP ロ INT 量 Base64 エ ンコ ー ド する に は [btoa()」 メ ソ ッ ド 、 
Base64 デ コー ド す る に は 「atob() 」 メ ソ ッ ド を 使う 


す ii 274 
ロ NEP ロ INT 量 印刷 する に は 「pDrint()」 メ ソ ッ ド を 使う 
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] ] ロ 選択 され た 文字 を 取得 する の で も もみ 6 させ すす の 守 eee する て 276 
ロ NEP ロ INT 箇 選択 され た 文字 を 取得 する に は 「getSelection() 」 メ ソ ッ ド と 
「getRangeAt() 」 メ ソ ッ ド を 使う 


1 1 ワ アラー ト ダ イア ログ / 確 認 ダ イア ログ / 入 力 ダ イア ログ を 表示 する …278 
ロ NEPDINT 箇 各種 ダイ アロ グ を 表示 する に は 
「alert り 」「confirm()」「prompt())」 メ ソ ッ ド を 使う 


ロロ LUNMN 画 表示 で きま な い 文 字 
ビ ロ LUMN 画 WindOwS Phone で は 「prompt() 」 メ ソ ッ ド は 使え な い 


] 1 日 モー ダル ダイ アロ グ を 表示 する ea 281 
ロ NEP ロ INT 箇 モー ダル ダイ アロ グ を 表示 する に は 
「 showModalDialog() 」 メ ソ ッ ド を 使う 


] 1 9 タイ マー を 設定 6 解除 する ee 283 
ロ NEP ロ INT 馬 タイ マー を 設定 する に は 「setTimeout() 」 メ ソ ッ ド 、 
タイ マー を 解除 する に は 「clearTimeout() 」 メ ソ ッ ド を 使う 


ビ ロ LUMN 画 [SetTimeout()」 メソッド の 番目 以降 の パラ メー タ 


1 分 イン ター/ り リル タイ マー を 設定 解除 する 0 286 
ロ NEP ロ INT 還 イン ター バル タイ マー を 設定 する に は [setlnterval() 」 メ ソ ッ ド 、 
解除 する に は 「clearlnterval() 」 メ ソ ッ ド を 使う 


| 隊 人 0 較 ニメーション 同期 タイ マー を 設定 ma 解除 する ソン で PP 289 
ロ NEPINT 還 アニ メー ショ ン 同 期 タ イマ ー を 設定 する に は 
[window.requestAnimationFrame()」 メ ソ ッ ド 、 
解 了 す る に は 「window.cancelAnimationFrame () 」 メ ソ ッ ド を 使う 


ビ ロ LUMN 画 ベン ダー プレ フィ ックス に つい て 
ee 292 


ロ NEP ロ INT 呈 非同期 処理 を 行う に は 「setlmmediate()」 メ ソ ッ ド を 使う 
ビ ロ LUMN 画 SetTimeout()」 メソッド を 使っ た 非同期 処理 


1 ジコ ドキ ュ メ ント の タイ トル を 取得 6 設定 する ee 294 
ロ NEPDINT 暑 ドキュ メン ト の タイ トル を 取得 ・ 設 定 す る に は 「title」 プロ パテ ィ を 使う 


1 ワイ ドキ ュ メ ント 内 に 出力 する TTY TEA23KAKXS OAI 21 YK を メス セル ミヤ ミイ ャ イ ャ と て ヤク イト YY 296 


ロ NEP ロ INT 上 ペ ー ジ へ の 出力 を 行う に は 「document.write() 」 メ ソ ッ ド を 使う 


1 らら クッ キー に 書き 込み が 可能 か どう か 調べ る ………… 上 〇 い 〇 の ぬ の ム (ドー… 297 
ロ NEPINT 生 クッ キー が 利用 で きる か 調べ る に は 「cookieEnabled」 プロ パテ ィ を 使う 


1 らら 6 クッ キー の 読み 書き を 行う の も かも:@: 生 ある 人 6: る "Wie 16: を る. か ます woe ちさ あむ を あす の 知る か も な る 2. 守 ee が 299 


ロ NEPDINT 天 クッ キー の 読み 書き を 行う に は 「document.cookie」 プロ パテ ィ を 使う 


1 選 ワ プ ドメイン 名 ・ ホ スト 名 ・ パ ス 名 ・ プ ロト コル を 求め る …… ル ひつ ……… ド … ド 302 
ロ NEP ロ INT 箇 URL 情報 を 取得 する に は 「location」 オ ブ ジ ェクト と 
[document」 オ ブ ジ ェクト の プロ パテ ィ を 使う 


] と 日 直前 に 見 て いた ペー ジ の URL を 求め る 連作 生か する の の 信人: 得る : 304 
ロ NEP ロ INT 箇 前 | に 見 て いた ペー ジ UHRHL を 取得 する に は 
[document_referrer] プロ パテ ィ を 使う 


1 9 ペー ジ を リロ ー ド する 上 t 上 i 人 ( 層 …ー ド ドド ドド に に に ト 305 
ロ NEP ロ INT 置 ペ ー ジ を リロ ー ド する に は 「reload() 」 メ ソ ッ ド を 使う 


1 ヨロ 


1 ヨ 1 


1 ヨコ 


1 ココ 


1 


1 紀 馬 


1 4 オロ 


1 オイ 1 


1 オジ 


1 4 コ 


1 オオ 


1 4 オ 5 


ペー ジ の URL を 取得 e 設定 す る ie: 307 
ロ NEPDINT 生 URL の 取得 と 移動 を 行う に は 「href] プロ パテ ィ を 使う 


[Image」 オ ブ ジ ェ ク ト を 生成 する 生生 才 間 2 人 電 309 
ロ NEPDINT 還 Image」 オ ブ ジ ェクト を 生成 する に は 「new Image」 と する 


画像 の 幅 を 設定 e 取得 する 0 311 
ロ NEP ロ INT 重 画像 の サイ ズ を 取得 ・ 設 定 す る に は 「width] プ ロバ ティ と 
[| height| プロ パテ ィ を 使う 


画像 の オリ ジ ナ ル の 幅 を 取得 する 守り い 要 人 寺地 生島: 取 1:: く 仙人 31 3③ 
ロ NEP ロ INT 呈 画像 の 元 の サイ ズ を 取得 する に は | naturalWidth] プロ パテ ィ と 
[naturalHeight| プロ パテ ィ を 使う 


画像 デー タ が 読み 込ま れ た 場合 に 処理 する 0 めき 8 生生 る な 315 
ロ NEP ロ INT 箇 画像 の 読み 込み 完了 の チェ ッ ク を 行う に は 「onload] プロ パテ ィ を 使う 
画像 デー タ を 入れ 替え る … の imrmrrrrrrrnr 317 


ロ NEPDINT 重 画像 の 入れ 替え を 行う に は 「src] プロ パテ ィ を 使う 
C ロ LUMNCSS で ロー ルオ ー バ ー を 行 つ に は 


フォ ー ム 要素 に アク セス する 上 …0tiiiieooeeeoeeererenrernrrrrnn 319 
ロ NEP ロ INT 叶 フォ ー ム を 制御 する に は 要素 に アク セス する 


ラジ オ ボ タ ン / チ ェ ッ クボ ックス の 状態 を 設定 ・ 取 得する …………… 321 
ロ NEPDINT 時 ラジオ ボタ ン と チェ ッ ク ボ ックス の 選択 状態 を 調べ る に は 

[checked」 プロ パテ ィ を 使う 
フォ ー ム 要素 の フォ ー カ ス を 設定 する 


ロ NIEPINT 重 フォー カス を 設定 する に は 「focus(O」 メ ソ ッ ド や 「blurO」 メ ソ ッ ド 、 
[select()」 メ ソ ッ ド を 使う 


フォ ー ム 内 容 を 読み 出す 生生 Pt テツ PP サヤ だ イ で イヤ イリ イス イマ イヤ や ンド で タイ だ 325 
ロ NEPINT 量 入力 され た 内 容 を 読み 出す に は 「value]」 プ ロバ パテ ィ を 使う 


内 容 を Date 型 / 数 値 型 と し て 読み 出す Eva 327 
ロ NEPINT 重 数 値 型 と し て 読み 出す に は 「valueAsSNumber」 プロ パテ ィ 、 
日 付 型 と し て 読み 出す に は 「valueAsDate」 プロ パテ ィ を 使う 


フォ ー ム へ の 入力 を 禁止 許可 する 人 か か も 宙 の な き を 60 きめ な な 329 
ロ NEP ロ INT 箇 テキ スト フィ ー ル ド へ の 入力 を 禁止 する に は 

[disabled」 プロパ ティ を 使う 
セレ ク トメ ニュ ー で 選択 され た 項目 を 取得 する の 331 


ロ NEP ロ INT 是 選択 され た 項目 の 情報 を 取得 する に は 「selectedIndex] プロ バテ ィ や 
[value」] プロ パテ ィ 、「text」 プロ パテ ィ を 使う 


フォ ー ム 内 容 を 初期 化す る に 333 
ロ NEP ロ INT 時 フォ ー ム 内 容 を 初 初期 化す る に は 「reset()」 メ ソ ッ ド を 使う 
数 値 専用 の フィ ー ル ド で 値 を 増減 する 電信 (6 335 


ロ NEPDINT 生 ボ タン で 値 を 増減 させ る に は |「stepUpDO」 メ ソ ッ ド と 
[steDDown()」 メ ソ ッ ド を 使う 


非同期 通信 オブ ジェ クト を 生成 する 
ロ NEP ロ INT 呈 非同期 通信 を 行う に は 「XMLHttpRequest」 オ ブ ジ ェクト を 使う 


IIIIIIIIIIIIIIIIIIIIIIIIHIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIE BUNTENTB IIHIHHHIHIHI 


IIIIIIIIIIE UEUONITENT 昌 卓上 HHHHIHIIIIIHIIIHIIIIIIIIIIIIIIIHIIIHIHIIIIIIIIIIHHIHIIHIIIIIIIIIHIIIIIHIIIIIIIIIHIIIIIIHIE 


1 4 オ 呈 サー バー か ら テ キス ト デ ー タ や XML デー タ を 受信 する ……… ド …… 339 
ロ NEPDINT 還 サー バー か がら テ キス ト デ ー タ を 受信 する に は 「responseText」 プロパ 
ティ 、 XML デー タ を 受信 する に は |responseXML」 プロ パテ ィ を 使う 


Ia 才 クエ スト ヘッ ダー を 設定 する 0 泊る 342 
ロ NEPDINT 箇 リク エス ト ヘ ッ ダ ー を 設定 する に は 
「setRHequestHeader() 」 メ ソ ッ ド を 使う 
ビ ロ LUMN 箇 IE6 -- で キャ ッシュ デー タ が 利用 され る の を 回 避 す る 方 法 


1] 4 日 MIME タ イプ を 設定 する 生生 者 六 介 可 半 和 :15 人 あき 客人 344 
ロ NEP ロ INT 箇 MIME タ イプ を 設定 する に は 「overrideMimeType() 」 メ ソ ッ ド を 使う 
ロ デリ バッグ コ ン ソ ー ル に 文字 を 出力 する 久生 な を 逢 隊 光生 が: 346 


ロ NEP ロ INT 呈 デバ ッ ガ の コン ソー ル に 出力 する に は 「console.Iog()」 メ ソ ッ ド を 使う 
ロロ LUMN 画 |COnSOle.I0g()」 メ ソ ッ ド の 出力 結果 に つい て 

P ロ LUMN 画 IE の 場合 

ロロ LUMN 画 その 他 の コン ソー ル 出 力 用 メソ ッ ド 

ビ ロ LUMN 箇 デバ ッ ガ を 表示 する に は 


1 ら 口 デバ ッ グ コン ソー ル に オブ ジェ クト の 内 容 を 出力 する ……………… 349 
ロ NEPINT 中 オブ ジェ クト の 中 身 を 確認 する に は 「console.dir() 」 メ ソ ッ ド を 使う 
ビ ロ LUMN 画 | COnSOle.dir()」 メ ソ ッ ド の 出力 結果 に つい て 


1 5 1 処理 に か か っ た 時 間 を 詳細 に 把握 する 科せ 7 いのり し ジッ 35 1 
ロ NEP ロ INT 重 処 理 時 間 を 詳し く 計 測 す る に は プロ ファ イル を 利用 する 
C ロ LUMN 軒 [COnSOle.Drofile() 」 メ ソ ッ ド の 出力 結果 に つい て 


] ら の 呼び 出 し 元 の 関数 を 把握 する に テッ テッ) さて 353 
ロ NEPINT 穫 呼 び 出し 元 の 関数 を 調べ る に は 「consale.trace()」 メ ソ ッ ド を 使う 
ロロ LUMN| COnSOle.trace()」 メ ソ ッ ド の 出力 結果 に つい て 


CHAPTER_ ロ B plel( 詳 議 間 間 間 間 間 間 間 間 昌明 昌 間 胃 衣 


] 選 コ 特定 の ID 名 を 持つ 要素 に アク セス する 7 ああ 9 の て ey の tar 97 あせ: の ee あな 定 る 356 
ロ NEPDINT 重 特定 の ID 名 を 持つ 要素 を 操作 する に は 
[getElementByld() 」 メ ソ ッ ド を 使う 


C ロ LUNMN 箇 DOM の 読み 込み タイ ミン グ 


1 5 特定 の スタ イル シー トク ラス を 持つ 要素 に アク セス する …………… バ 358 
ロ NEP ロ INT 生 特定 の スタ イル シー トク ラス を 持つ 要素 に アク セス する に は 
[getElementsByClassName () 」 メ ソ ッ ド を 使う 


] 局 呈 要素 名 を 指定 し て アク セス する 生ま 和沙 生 きか > 9 5. 360 
ロ NEPDINT 重 要素 名 を 指定 し て アク セス する に は 
「getElementsByTagName()」 メ ソ ッ ド を 使う 


] 呈 ら 特定 の 名 前 を 持つ 要素 に アク セス する 生生 362 
ロ NEP ロ INT 生 名 前 を 指定 し て アク セス する に は 
「getElementsByName() 」 メ ソ ッ ド を 使う 


] ら ワ セレ クタ を 使っ て 要素 に アク セス する で YY エ で て すす る て キバ で ママ メン イプ 364 
ロ NEP ロ INT 征 セレク 夕 を 使っ て 要素 に アク セス する に は 
[querySelector()」「querySelectorAll() 」 メ ソ ッ ド を 使う 
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IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIE ON TENT 昌 日 晶 晶 目 | 


むち 日 


161 


162 


1 


164 


1 ら 65 


166 


| 軒 - が 。 


1 6 


1 69 


1 の 


要素 を 生成 す る メー シャ と 366 
ロ NEP ロ INT 重要 素 を 生成 する に は 「document.createElement() 」 メ ソ ッ ド を 使う 
テキ スト ノー ド を 生成 する ee 368 


ロ NIEPINT 暑 テキ スト ノー ド を 生成 する に は 
「document.createTextNode() 」 メ ソ ッ ド を 使う 


子 ノ ー ド に アク セス する の … の 和 oe 二 Dieeezeys5 370 
ロ NEPINT 軒 子 ブ アード に アク セス する に は 
[firstChild」 | childNodes」「lastChild] プロ パテ ィ を 使う 


前 後 の ノ ー ド や 親 ノ ー ド に アク セス する イズ トペ イッ て ルイ マッ アシ サイ イイ シセ マイ シセ アル で アイ < て の 
ロ NIEPDINT 重 前 後 の ノ ー ド に アク セス する に は [|nextSibling」「previousSibling」 プ 
ロ パ ティ 、 親 ノ ー ド に アク セス する に は 「parentNode」 プロ パテ ィ を 使う 


ノー ド を 追加 ・ 挿 入 す る 信和 和 ee 374 
ロ NIEPINT 息 ノー ド を 追加 する に は 「appendChild()」 メ ソ ッ ド 、 
挿入 する に は 「insertBefore() 」 メ ソ ッ ド を 使う 


ノー ド を 間際 ・ 隊 失 す 仁和 人 ae 376 
ロ NEPDINT 箇 子 ノ ー ド を 削除 する に は |「removeChild() 」 メ ソ ッ ド 、 
置換 する に は 「replaceChild() 」 メ ソ ッ ド を 使う 


ノー ド の 内 容 に アク セス する が 378 
ロ NIEPINT 軒 プー ド の 内 容 に アク セス する に は 「nodeValue] プロ パテ ィ を 参照 する 


要素 の 内 容 を 書き 換え る …… ふ べ 生 束 役 凌 (9 の GE いあ < に ね お 8 380 
ロ NEPINT 量 要素 の 内 容 を 書き 換え る に は 「innerHTML」 プロ パテ ィ や 
[innerText」 プロ パテ ィ を 使う 


属性 値 を 取得 e 設定 する ん も が かす 00 泊 が 09 を 和 あず 9 を めす も s. を 9 か Wi6 を Ion の 0 も eoe es 382 
ロ NEPDINT 重 属性 値 を 取得 する に は 「getAttribute()」 メ ソ ッ ド 、 

設定 する に は 「setAttribute()」 メ ソ ッ ド を 使う 
C ロ LUMN 画 IE6/IE7 で の [class」 属 性 


属性 を 新規 作成 ・ 削 除 する ドド ooeeennmmm 384 


ロ NEP ロ INT 重 新規 に 属性 を 作成 する に は 「document.createAttriDute() 」 メ ソ ッ ド 、 
削除 する に は 「removeAttribute() 」 メ ソ ッ ド を 使う 


ノー ド を 一 括 し て 追加 す る に ヤン アテ ェ デ リル す スヤ です です イン ッ マ ー ャ 386 
ロ NIEPDINT 量 ノード を 一 括 し て 追加 する に は 「document.createDocument 
Fragment()」 メ ソ ッ ド を 使っ て 他 の DOM ツ リー を 用 意 す る 


ロロ LUMN 画 ノー ド を 追加 する 際 の 速度 に つい て 


GhadOW DOM と し て 要素 を 追加 する る 388 
ロ NIEP ロ INT 箇 SGhadOw DOM と し て 追加 する に は 
[new WebKitShadowRoot()」 と する 


ピロ LUNMN 箇 ChrOme で の 設定 


通常 の DOM ツ リー の 要素 を Shadow DOM に する ………(………… ジ 390 
ロ NEPDINT 箇 要素 を Shadow DOM に する に は 
[new WebKitShadowRoot()」 と する 


ロロ LUNMN 箇 ChrOme で の 設定 
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IIIHIIIIIIIE OTNITENT 戸 TE 


] が 2 ] で hadOW DOM に ある 要素 に アク セス する Ge の の eo の あぁ の て 密か の も 衝 和 る oo os な al 。 392 「 
ロ NEPINT 箇 ShadOWw DOM に ある 要素 に アク セス する に は 
DOM 関 連 の メソ ッ ド を 使う 
ロロ LUNMN 箇 ChrOme で の 設定 


還 呈 Wa 上 = 馬 mE』 イベ ント 


1 ワ ジ イベ ント ハン ドラ を 設定 する 上 tu ドド ーー 396 
ロ NEP ロ INT 還 イベ ント ハン ドラ を 設定 する に は 要素 に 割り 当て られ た プロ パテ ィ を 使う 
1 ワ コ ヨコ イベ ント リス ナー を 設定 する 上 ーー レ レツ ピ ツ ッ ツ ーmmー ド ドド om 398 


ロ NEPOINT 年 イベ ント リス ナー を 設定 する に は 
[addEventListener() 」 メ ソ ッ ド を 使う 


CO ロ LUMN 面 IE6 -ー 8 で イベ ント リス ナー を 設定 する に は 
1 ワイ 押さ れ た キー を 調べ る … 層 † に に 401 


ロ NEP ロ INT 重 押さ ご れ た キー を 調べ る に は 「keyCode」 プロ パテ ィ や 
修飾 キ 一 専用 の プロ パテ ィ を 使う 


C ロ LUMN ス マー ト フ ォ ン で の キー 入力 


1 ワ ら イベ ント が 発生 し た 座標 を 求め る ………… の 0……ー ド oon 404 
ロ NEPINT 午 イベ ント が 発生 し た 座標 を 求め る に は 「clientX」 プ ロ パ ティ や 
[clientY] プロ パテ ィ な ど を 使う 


1 ワ 6 発生 し た イ の 」 ト の 種類 を 求め る か こそ イタ アイ ザイ そ て 、 て ーー と 406 
ロ NEP ロ INT 重 発生 し た イベ ント の 種類 を 求め る に は 「type」 プロ パテ ィ を 使う 
1 マウ スホイ ー ル の 値 を 取得 する 81 あ 電王 408 


ロ NEPDINT 箇 マウ スホイ ー ル の 値 を 取得 する に は |「mousewheel」 イ ベン ト や 
[DOMMouseScroll」 イ ベン ト を 検知 する 


1 ワ 日 トラ ッ ク / い ッ ド の 移動 量 を 求め る 6 410 
ロ NEPINT 還 トラ ッ ク パ ッ ド の 移動 量 を 求め る に は 
[MozMousePixelScroll」 イ ベン ト を 検知 する 


C ロ LUNMN 玉 マウ スホイ ー ル と の 関係 


1 アツ 9 フォ ー カ ス H 作 馬 人 に 埋 拉 舞 和 412 
ロ NEP ロ INT 箇 フォ ー カ ス に 関す る 処理 を 行う に は 「focus」 イ ベン ト や 
「blur」 イ ベン ト を 使う 
1 日 口 クリ ッ ク 時 / ダ ブル クリ ッ ク 時 の 処理 を 行う ……… つぐ つぐ (に nm め ーー ドド … 414 


ロ NEPINT 箇 クリ ッ ク 時 に 処理 を 行う に は 「click」 イ ベン ト 、 
ダブ ルク リッ ク 時 に 処理 を 行う に は 「dblclick」 イ ベン ト を 捕捉 する 


1 如 ] マウ ス オ ー バ ー 時 / マ ウス の 2 時 の 電 林 知行 うう いで の 416 
ロ NEPDINT 還 マウ ス オ ー バ ー 時 の 処理 を 行う に は 「mouseover」 イ ベン ト 、 
マウ ス ア ウト 時 の 処理 を 行う に は |「mouseout」 イ ベン ト を 捕捉 する 


) 2 マ ワ スタ ワン 時 / マ ウス アラ 2 418 
ロ NEPINT 箇 マウ ス ダ ウ ン 時 の 処理 を 行う に は 「mousedown」 イ ベン ト 、 
マウ ス ア ッ プ 時 の 処理 を 行う に は 「mouseup」 イ ベン ト を 捕捉 する 
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IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIE DUONTENT 曲 日 


ド 8 コ 


1 選 イ 


1 半 - メ ー 


1 - ジ 。 


l 必 ニニ 


1 当ら 9 


1 ラロ 


9 1 





19 ジ 


1 ラコ 


マウ ス の 右 ボ タ ン が 押さ れ た と き に 処理 する 2 も SU 和 ACE 。。。21。 420 
ロ NEPDINT 画 マウ ス の 右 ボ タン が 押さ れ た と き に 処理 する に は 
| contextmenu」 イ ベン ト を 捕捉 する 


ロロ LUNMN 画 WindOwS Phone の 場合 


カッ ト / コ ピー / ペ ー ス ト さ れ た 際 に 処理 を 行う で すい 422 
ロ NEPINT 画 カッ ト ・ コ ピー・ ペ ー ス ト さ れ た 際 に 処理 を 行う に は 
[copy」 イ ベン ト や 「paste」 イ ベン ト な ど を 補足 する 


ドラ ッ グ 時 | こ 処 理 を 行う 本 電 1 が 424 
ロ NEP ロ INT 箇 ド ラッ グ 時 に 処理 を 行う に は 
[dragstartl 「drag」 [dragend」 イ ベン ト を 補足 する 


ペー ジ の 読み 込み や DOM の 構築 が 完了 し た 際 に 処理 を 行う ……… 427 
ロ NEPINT 箇 DOM の 構築 が 完了 し た 際 に 処理 を 行う に は 
[DOMContentLoaded」 イ ベン ト を 検知 する 


リセ ッ ト 時 6 捧 信 時 に 処理 する ーー 429 
ロ NEPINT 重 リセット 時 に 処理 する に は |「reset」 イ ベン ト 、 
送信 時 に 処理 する に は 「submit」 イ ベン ト を 補足 する 


スク ロー ル 時 に 処理 を 行う 人 吉富! 9 結束 431 
ロ NEP ロ INT 画 スク ロー ル 時 に 処理 する に は 「scroll」l イ ベン ト を 捕捉 する 
テキ スト フィ ー ル ド 内 の テキ スト 選択 時 に 処理 を 行う …………………| 433 


ロ NEPDINT 還 テキ スト 選択 時 に 処理 を 行う に は |「select」 イ ベン ト を 捕捉 する 
ロロ LUNMN 画 IE6 8 で 動作 させ る に は 


指定 し た 座標 | 由 あ る 複数 の 要素 を 求め る が 生生 (の 剖 和 (1 436 
ロ NEP ロ INT 箇 指定 し た 座標 に ある 要素 を 求め る に は |「elementFromPoint(」 
「elementsFromPoint()」「elementsFromHect() 」 メ ソ ッ ド を 使う 


CSS の メデ ィ ア クエ リ が 変化 し た ら 処 理 す る ーー 438 
ロ NEPINT 箇 メデ イア クエ リ が 変化 し た ら 処 理 す る に は 
[window.matchMedia())」 メ ソ ッ ド と 「addListener()」 メ ソ ッ ド を 使う 


本 語 P29 ニ EN (TV コ S/ じ anVaS GD/SVG 


コツ デキ 「 ト を 取得 す る の 河和 442 
ロ NEP ロ INT 量 コン テキ スト を 取得 する に は 「getContext()」 メ ソ ッ ド を 使う 


/ \ ス を 作成 する ーー 444 
ロ NEP ロ INT 箇 新規 に パス を 作成 する に は 「beginPath(O」 メ ソ ッ ド 、 
クロ ー ズ パス に 設定 する に は 「closePath()」 メ ソ ッ ド を 使う 


ロロ LUNMN 箇 AndrOid で の 不具 合 


1 9 ワイ 直線 を 描画 する ee 446 


1 g 回 


ロ NEPDINT 置 直線 の 描画 を 行う に は 「lineTo() 」 メ ソ ッ ド を 使う 
ロロ LUMN 軒 連続 し て 直線 を 描く に は 


四角 形 を 措 画 す る 時 で ド や の や こも て マス ヤル ルイ て ミヤ で で スマ イイ ンー で イツ 448 
ロ NEP ロ INT 生 四角形 の 描画 を 行う に は 「 各 Rect()」「strokeRect()」「clearRect()」 
[rect()」 メ ソ ッ ド を 使う 


IIIIIIIIIIIIIE DUHNTENT 昌 昌和 HHIHIIHIIIIIIIIIIIIIIIIIIIIHIIIIIIHIIIIIIIIHIIIIIIIIIIIIIIIIHIIIIIIIIIIIHIIIIIIIIIIIIIIIIIII 


1 96 円 や 円 弧 を 描く の 衝 あ 短 を さち. が お Pl 大 を すす 光二 人 も 儲 va 深 あさ な きす な SRDheed3.5 450 
ロ NEPDINT 量 円 や 円 弧 の 描画 を 行う に は 「arc(」 メ ソ ッ ド や 「arcTo()」 メ ソ ッ ド を 使う 
P ロ LUNMN 箇 AndrOid で の 不具 合 
ロロ LUNMN 箇 Dera で の 不具 合 


1. る 3 " プ 曲線 を 描く る まで 前 の まな 沈ま も an 人 ce 453 
ロ NEP ロ INT 生 曲線 の 描画 を 行う に は 「bezierCurveTo()」 メ ソ ッ ド や 
[quadraticCurveTo()」 メ ソ ッ ド を 使う 


1 9 日 多角 形 を 描く で アア 455 
ロ NEPOINT 重 多角 形 を 描画 する に は 角度 か ら X 座 標 と Y 座 標 を 求め る 
1 9 角 和 丸 四 角形 を 描く 人 ず 才 ( 少 天 二 池 湯 和 457 


ロ NEP ロ INT 重 角 丸 四角 形 を 描画 する に は [lineTo()」 メ ソ ッ ド と 
「arc()」 メ ソ ッ ド を 組み 合わ せる 


ジロ 口 ドー ナツ な どの 中 を くり 抜い た 図形 を 描く … ひ … ひ つつ ll( つ の ーー ドー ドー ドー ドジ 459 
ロ NEP ロ INT 軒 中 を くり 抜い た 図形 を 描く に に は パス の ベク トル を 考慮 する 
ピロ LUNMN 還 AndOrid で の 不具 合 


ロロ 1 色 と 線 の スタ イル を 設定 する あお 折る 461 
ロ NEPDINIT 画 スタ イル の 指定 を 行う に は 「strokeStyle」 プロ パテ ィ を 使う 

2 ます] < フ 2 不透明 度 を 設定 す る 二流) 463 
ロ NEPINT 年 不透明 度 の 指定 を 行う に は 「globalAlpha] プロ パテ ィ を 使う 

ロコ 所 画 モー ド を 設定 する すり や アッ キス て で で と し くそ た マ イマ マ と チャ ーッ アサ アン 465 


ロ NEPDINT 量 所 男 モー ド の 指定 を 行う に は 
「globalCompositeOperation | プロ パテ ィ を 使う 


ロイ クリ ッ ピ ング する 67 の (な 深雪: を 468 
ロ NEPINT 箇 クリ ッ ピ ング 領域 の 指定 を 行う に は 「clip ()」 メ ソ ッ ド を 使う 
ウン 4 男 1 文字 を 措 画 す る 宮寺 00 470 


ロ NEPINT 天 文字 を 描画 する に は 「filIText(O)」 メ ソ ッ ド や 
|strokeText()」 メ ソ ッ ド を 使う 


C ロ LUNMN 箇 Safari 5 ら と Opera で の 不具 合 


ロロ 6 文字 の 幅 を 求め る も も する 人 の の する を る する お る な まき の な を の る な ぐる ゃ も で か 6 和紀 Lo て 学 の な 4 472 


ロ NEPDINT 画 文字 幅 を 求め る に は テキ スト メト リク ス オ ブ ジェ クト の 
[width] プロ パテ ィ を 使う 


C ロ LUMN 箇 検討 中 の テキ スト メト リク ス の プロ パテ ィ 


人 潤 暫 / 文字 の 位置 揃え を 指定 す る 上 NE 474 
ロ NEP ロ INT 箇 文字 の 位置 揃え を 指定 する に は 「textAlign] プロ パテ ィ を 使う 


ロロ 日 グラ デー ショ ン な を 設定 する 上 … 杯 ooooeenne… 476 
ロ NIEP ロ INT 罰 グラ デー ショ ン を 描画 する に は 「createLinearGradient() 」 メ ソ ッ ド や 
[createRadialGradient() 」 メ ソ ッ ド を 使う 


ラロ 9 画像 を 描画 する 上 放 必 へ 全 ee 478 
ロ NEP ロ INT 箇 画像 を 描画 する に は [drawlmage() 」 メ ソ ッ ド を 使う 
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2 1 ワ 


ジロ 


2 | 


グレ ー ス ケー ル 画 像 に する 吉光 7 人 の 学 の あ も 仙人 8 生生 480 
ロ NEPDINT グ レー スケ ー ル 画像 に する に は ピク セル デー タ を 読み 出し て 
計算 式 に 従っ て 変換 する 
C ロ LUNMN 画 品 一 力 ル ディ スク 上 で の 動作 に つい て 
ロロ LUMN 画 処理 する 画像 が 大 きい 場合 
ロ LUMN 画 Safari 6 と Retina Display の 場合 


エン ボス 加工 する ……]…ーー ド rt 484 
ロ NEP ロ INT 置 エン ボス 加工 する に は 2 ら つの ピク セル の 輝度 の 差分 を 取る 

ビ ロ LUMN 軒 ロー カル ディ スク 上 で の 動作 に つい て 

C ロ LUMN 箇 処理 する 画像 が 大 きい 場合 


画像 を ぼかす 還っ 488 
ロ NEP ロ INT 重 画像 を ば か す に は ピク セル の 平均 を 取る 

ビ ロ LUMN 箇 ロー カル ディ スク 上 で の 動作 に つい て 

C ロ LUMN 画 処理 する 画像 が 大 きい 場合 

ロ LUMN 画 ガウ ス ぽ か し を 適用 する に は 


画像 の ガン マ 補 上 正 を 行う 人 人 潤二 3 め せ 16 492 
ロ NEPDINT 重 画像 の ガン マ 補 正 を 行う に は 「255X( 輝 度 -255) 」 の 計算 式 を 使う 

ロロ LUNMN 箇 口 一 力 ル ディ スク 上 で の 動作 の つい て 

C ロ LUMN 画 処理 する 画像 が 大 きい 場合 


画像 を 白黒 化 ( の 値 化 ) す る 和議 495 
ロ NEP ロ INT 置 画像 を 白黒 化 (2 値 化 ) す る に は し きい 値 に よっ て 
黒 と 白 に ビ ピク セル を 置き 換え る 
ロ LUMN 画 口 一 力 ル ディ スク 上 で の 動作 に つい て 
ロロ LUMN 画 処理 する 画像 が 大 きい 場合 


画像 を 特定 の 色相 (トー ン ) に す る の 9: か た な ぎす ち な も か の ちず る る すり WO. が めす 9 馬 る 4 あま 60 499 
ロ NEP ロ INT 昌 画像 を 特定 の 色相 (トー ン ) に する に は ピク セル の 色情 報 を RGB か ら 
HSV や HSL な ど に 変換 する 
ロ LUMN 箇 口 一 力 ル ディ スク 上 で の 動作 に つい て 
C ロ LUMN 画 処理 する 画像 が 大 きい 場合 


/ ター ン を 生成 する Ar 503 
ロ NEPOINT 生 パタ ー ン を 生成 する に は 「createPattern()」 メ ソ ッ ド を 使う 
景 を 押田 す る すす イデ か て と シキ テイ イア で トリ マッ イイ リッ ドナ スイ 505 


ロ NEP ロ INT 箇 影 を 描画 する に は 「shadowColor」「shadowBlur」 
[shadowOffsetX」 「shadowOffSetY」 プ ロ パ ティ を 使う 


ビ ロ LUMN 箇 AndrOid の 「shadowOffsetY」 プロ パテ ィ の 人 不具合 


映像 を Canvas に 描画 する アー キダ リネ イマ イレ デイ イト て) 507 
ロ NEPINT 重 映 像 を 描画 する に は 「drawlmage()」 メ ソ ッ ド を 使う 

Canvas の 内 容 を 他 の Canvas に 描画 する ae 509 
ロ NEP ロ INT 重 他 の Canvas の 内 容 を 描画 する に は 「drawlmage().」 メ ソ ッ ド を 使う 

図形 を 回 転 さ せ る ee 512 
ロ NEPDINT 年 回 転 を 行う に は 「rotate()」 メ ソ ッ ド を 使う 

図形 を 移動 させ る YY すく て ザ サ ン ペ セ イ ポテ スー で で ザル タマ イマ マイ YY 514 


ロ NEP ロ INT 重 移動 処理 を 行う に は 「translate()」 メ ソ ッ ド を 使う 
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人 デ 。 図形 を 拡大 4 縮小 させ る ーー ーー で で リリ で 516 
ロ NEP ロ INT 箇 拡大 ・ 縮 小 を 行う に は 「scale ()」 メ ソ ッ ド を 使う 
らら コ 図形 や 画像 を 変形 させ る ………ー バ t ド ドド ーーーーーーーーー…… 518 


ロ NEP ロ INT 旦 図 形 や 画像 を 変形 べ ご せる に は [transform() 」 メ ソ ッ ド や 
「setTransform()」 メ ソ ッ ド を 使う 


ライ バス 内 に 座標 点 が ある か 調べ る … 和 つつ ーー トド ドド ドド ーー 520 
ロ NEP ロ INT 箇 バス 内 に 座標 点 が ある か 調べ る に は 「isPointInPath()」 メ ソ ッ ド を 使う 
ワラ ワン 5 ら Canvas の 状態 を 保存 e 復元 する Ss 523 


ロ NEPDINT 是 Canvas の 状態 を 保存 する に は 「save()」 メ ソ ッ ド 、 
復元 する に は 「restore() 」 メ ソ ッ ド を 使う 


226 Canvas に 措 画 済み の 内 容 を スク ロー ル す る … iii 525 
ロ NEP ロ INT 量 Canvas の 内 容 を スク ロー ル す る に は 「getlmageData() 」 メ ソ ッ ド と 
[putlmageData() 」 メ ソ ッ ド を 使う 


らら ワ Canvas の 画像 デー タ を dataUHL 形 式 に 変換 する 。 ……………… 527 
ロ NEP ロ INT 還 ビク セル デー タ を datURL 形 式 に 変換 する に は 
[toDataUHL()」 メ ソ ッ ド を 使う 


ビ ロ LUMN 一 力 ル ディ スク 上 で の 動作 
クン ク 日 画像 を ロー カル スト レー ジ に 保存 する 久地 湯 党 泊め まあ 6 529 


ロ NEPDINT 年 画像 を 保存 する に は 「toDataURL() 」 メ ソ ッ ド を 使う 
ロロ LUMN 一 一 力 ル ディ スク 上 で の 動作 


9 WebGL が 利用 で きる か 調べ る 和 上 ………ー ド ドド ドーー…ー… 532 
ロ NEP ロ INT 重 3D 描 画 が 可能 か 調べ る に は 「getContext() 」 メ ソ ッ ド を 使 う 

の つ コ 口 Three.jS を 使っ て 3D 処 理 を 行う YY スパ クミ イヤ て イッ 1 イア アア マイ イー 534 
ロ NEP ロ INT 還 3 処理 を 簡単 に 行う に は Three.jS を 使う 

23 1 ワイ ヤー フレ ー ム 表示 の 幅 と 不透明 度 を 設定 する …………… バ パパ 537 


ロ NEP ロ INT 量 ワイ ヤー フレ ー ム の 幅 を 指定 する に は 「wireframeLinewidth」 プ ロ パ 
ティ 、 不透明 度 を 指定 する に は 「opacity」 プロ パテ ィ を 使う 


ン の う 力 メ ラ を 設定 する ああ る あ 信 あま る かる まあ 放 誠 あき る る まお まあ ある る な さがる な な 0 539 

ロ NEPDINT 香 設定 で きる カメ ラ に は 透視 投影 の カメ ラ と 正 投影 の カメ ラ 、 
復 合 カメ ラ が ある 

ココ 光源 を 追加 する で で "7 キャ で の 生生 542 
ロ NEPINT 箇 平行 光源 を 追加 する に は 「new THREE.DirectionalLight() 」 と する 

ワ コ ノ イ 立方体 を 生成 する 90 人 ee2 の ee 544 
ロ NEP ロ INT 重 方 体 を 生成 する に は 「new THREE.CubeGeometry() 」 と する 

ワ コ ら 球体 を 生成 する ああ 生来 546 
ロ NEPINT 箇 球体 を 生成 する に は 「new THREE.SphereGeometry() 」 と する 

に きす ご トー ラス を 生成 する 0 江本 549 
ロ NIEP ロ INT 箇 トー ラス を 生成 する に は 「new THREE.TorusGeometry() 」 と する 

ワ コ 7/ トー ラス 結び 目 を 生成 する 6 人: 551 


ロ NEP ロ INT 画 トー ラス 結び 目 を 生成 する に は 
[new THREE.TorusKnotGeometry() 」 と する 
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らら け 


ンタ っ 還 


つつ 


らら 


平面 を 生成 す る も の ざま まる の な:e se 村 5593 
ロ NEP ロ INT 重 平面 を 生成 する に は 「new THREE.PlaneGeometry() 」 と する 

円 筒 を 生成 する も 72720 0MY ル DANAYYRARY ら 55 ら 5 
ロ NIEP ロ INT 重 円筒 を 生成 する に は 「new THREE.CylinderGeometry(」 と する 

正二 十 面体 を 生 成す る Se 557 


ロ NEPDINT 量 正二 十 面 体 を 生成 する に は 
[new THREE.IcosahedronGeometry()」 と する 


回 転 体 を 生成 す る 570 清光: 和 (5676 560 
ロ NEPDINT 量 回 転 体 を 生成 する に は 「new THREE.LatheGeometry()」 と する 

線 を 生成 す る 人 563 
ロ NEPDINT 画 線 を 生成 する に は 「new THREE.Geometry().」 と する 

テク スチ ャ マッ ピン グ を 行う 時 ず キ ザヤ ザヤ ザ アヤ で ドド す で や すす で YY タテ 1 リン は ーー 566 


ロ NIEPINT 箇 画像 を 貼り 付け る に は 
「new THREE.ImageUtils.IoadTexture()」 を 使う 


周り の 景色 を 反射 させ て 表示 する は 人 あ 電 裕和 6: め 6 569 
ロ NIEPINT 箇 環境 マッ プ を 設定 する に は 
「THREE.ImageUtils.lIoadTextureCube()」 を 使う 


隊 方 体 な どの 物体 を 回 転 さ せ と COCPCCOPCCPTCCPTEEYTETPCCPDHHEPCEHECYKSE 572 


ロ NIEP ロ INT 重 回 転 さ せる に は [rotation.xl「rotation.y」「rotation.Z] プロ パテ ィ を 使う 


立方 体 な どの 物体 を 移動 さ ご せる の 207) 作り 90 者: 二 本 5 574 


ロ NEPDINT 生 移動 ご せる に は 「position.x」「position.y」 「position.Z] プ ロバ ティ を 使う 


攻 方 体 な どの 物体 の スケ ー ル を 変更 する な 577 
ロ NEPDINT 箇 スケ ー ル を 変更 する に は 「scale.x」「scale.y」「scale.zZ] プロ パテ ィ を 使う 


文字 を 3D で 措 画 す る (人 電 580 
ロ NEPINT 箇 Three.jS で 文字 を 描画 する に は typeface.jS を 使 つ 
ロロ LUMN 箇 べべ ベル を 指定 する に は 


肥 ( フォグ) を 設定 する 2 583 
ロ NEP ロ INT 箇 ( フォグ) を 設定 する に は 「fog] プロ パテ ィ を 使う 

立体 の 影 を 表示 す る 生計 600 586 
ロ NEP ロ INT 箇 立体 の 影 を 表示 する に は 「shadowMapEnabled」 プロ パテ ィ な ど を 使う 
WebGL が 使え な い デ バイ ス で も 3D 描 画 を 可能 に する …………… 589 


ロ NEPINT 玉 IPhone や Android で 3D 描 画 を 可能 に する に は 
[new THREE.CanvasHenderer()」 と する 


ビ ロ LUMN 画 IE で 表示 され な い 場 合 に つい て 


SVG の 図形 の サイ ズ を 変更 する 7 まつ て ンチ や で ヤヤ YY シン PT て 1 て イー 592 
ロ NEP ロ INT 量 SVG の 図形 の サイ ズ を 変更 する に は 

図形 を 示す 要素 の 「width] 属 性 と 「heightl 属 性 の 値 を 変更 する 
SVG の 図形 の 位置 を 変更 する iii つ ieoeoeoeooeoeorerrerrrrrr 594 


ロ NEP ロ INT 箇 SVG の 図形 の 位置 を 変更 する に は 
図形 を 示す 要素 の 「x」 属 性 と |y」 属 性 の 値 を 変更 する 


IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIE ENTENT 昌 III 
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IIIHIIIIH DUONTENT 昌 上 


ワラ ら ノ 4 SVG の 図形 を 変形 する 仙人 お宮 湯泊: の 倒す の あ る かな な oe さく 。 596 
ロ NEPINT 箇 SGVG の 図形 を 変形 する に は 「transform」 属 性 を 使う 
らら SVG の 図形 の 塗り や 線 の 色 を 変更 する な が:@.6 あ や の 0 の が 5 な SS 補い Po る 3 。 599 


ロ NEP ロ INT 箇 SGVG の 図形 の 塗り や 線 の 色 を 変更 する に は 
図形 を 示す 要素 の | 作 属 性 や 「stroke」 属 性 の 値 を 変更 する 


の ま ら 全 SVG の テキ スト の 内 容 を 変更 する 1 2 は スマ トイ テイ クイ ペイ イー ンー イン ツン で ので 生生 601 
ロ NEP ロ INT 箇 GVG の テキ スト の 内 容 を 変更 する に は 
[textContent」 プロ パテ ィ を 使う 


2 ら ワ 7 SVG の 図形 の グラ デー ショ ン の 種類 を 変更 する ………………… 603 
ロ NEP ロ INT 箇 SGVG の 図形 の グラ デー ショ ン の 種類 を 変更 する に は 
図形 を 示す 要素 の | 刊 | 属性 の 値 を 変更 する 


本 PIEI 還 較 人 UIO/Vide0/HTML Mediga 


らら 日 オー ディ オオ ブ ジ ェ ク ト を 生成 する 1 (7 608 
ロ NEPDINT 夏 オー デイ ィ イオ オブ ジェ クト を 生成 する に は 「new Audio()」 を 使う 
ビ ロ LUMN 画 昔 を 生成 する 他 の 方 法 
ビ ロ LUNMN 画 FirefOxX や Opera で の 音声 の 再生 に つい て 

らら オー ディ オ を 再生 N 停止 する 方 な る e 入 は まあ 析 9 洗 も 8 あ 2 る 9 か が &e 23c 作 SS ee53 。 610 


ロ NEPINT 量 オー ディ オ を 再生 する に は 「play() 」 メ ソ ッ ド 、 
停止 する に は 「pause() 」 メ ソ ッ ド を 使う 


らら 口 再生 時 間 を 取得 6 設定 する eS 612 
ロ NEPOINT 量 演奏 開始 時 間 と 再生 時 間 を 取得 ・ 設 定 す る に は 
[currentTirme」 プロ パテ ィ を 使う 


ワム 6 ] オー ディ オ の 長 さ を 調べ る ンー 614 
ロ NEP ロ INT 還 オー ディ イオ の 長 さ を 取得 する に は 「durationm] プロパ ティ を 使う 
262 指定 され た オー ディ オ 形 式 が 再生 可能 か どう か 調べ る …………… 616 


ロ NEPINT 中 再生 可能 な オー ディ オフ ァイル の 形式 を 調べ る に は 
[canPlayType()」 メ ソ ッ ド を 使う 


つら オー ディ オフ ァイル の 読み 込み に 応じ て 変化 する 
通信 状態 を 調べ る ……… 618 
ロ NEP ロ INT 量 通信 状態 を 調べ る に は 「networkState」 プロ パテ ィ を 使う 


ロロ LUMN 画 WindOows Phone の 場合 の [networkState」 プロ パテ ィ と 
|readyState」 プロ パテ ィ 


2 つら 人 4 オー ディ オ の ポ ボリューム を 設定 ・ ミ ュー ト に する … oroiooioi 620 
ロ NEPINT 生 ボリ ュー ム を 設定 する に は 「volume」 プロ パテ ィ 、 
ミュ ー ト する に は 「muted」 プ ロ パ ティ 使 う 


つら ら オー ディ オ の コン トロ ー ラ ー の 表示 / 非 表示 を 設定 する ………… 623 
ロ NEPDINT 暑 オー デイ ィ イオ の コン トロ ー ラ ー の 表示 制御 を 行う に は 
|「 controlsS」 プロ パテ ィ を 使う 
らら 6 オー ディ オデ ー タ を 読み 込む は 失 本 ば あ 全 宙 が 本 全 知人 が の 6: 泊 あ が な 人 625 


ロ NEP ロ INT 生 オー ディ オデ ー タ を 読み 込ま せる に は 「src」 プ ロ パ ティ を 使う 
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26 デ 7/ 


6 ロロ 


つら 9 


2/ ロ 


2/1| 


2 / グ 


2/ ゴ 


2 ソイ 


2 


2 ソノ ら 6 


5./ / 


2 / 日 


0 


有 コ ロロ 


2 日 | 


オー ディ オ の 再生 状態 を 調べ る oo 627 
ロ NEP ロ INT 重 オーディオ の 状態 を 取得 する に は | currentTime] プロ パテ ィ や 
「 paused] プロ パテ ィ な ど を 使う 


オー ディ オ の 有 再生 速度 を 変更 する 0 629 
ロ NEPDINT 重 再 生 速 度 を 変更 する に は 「playbackRHate」 プロ パテ ィ を 使う 


オー ディ オ の 有 再生 時 の イベ ント を 取得 する 
ロ NEPINT 生 オー ディ オ が 再生 され た 際 に 処理 を 設定 する に は 
[timeupdate」 イベント を 使う 


オー ディ オ の 再生 が 終了 し た 際 の イベ ント を 取得 する ……………… 633 
ロ NEPDINT 箇 オー ディ オ の 再生 が 終了 し た 際 の 処理 を 設定 する に は 
[ended]」 イ ベン ト を 使う 


オー ディ オ の ボリ ュー ム が 変更 され た 際 の イベ ント を 取得 する …… 635 
ロ NEP ロ INT 明 ボリ ュー ム 変 更 時 の 処理 を 行う に は 「volumechange」 イ ベン ト を 使う 


| video」 要素 に アク セス する 間際: 人 天仙: 人 各区 637 
ロ NIEPINT 量 映像 に アク セス する に は [video」 要 素 を 使う 
ロロ LUMN 画 FirefOxX や Opera で の 映像 の 再生 に つい て 


映像 を 再生 e 停 止 す る まま 639 
ロ NEPINT 呈 再生 を 行う に は 「play()」 メ ソ ッ ド 、 
停止 を 行う に は 「pause()」 メ ソ ッ ド を 使う 


映像 の 再生 時 間 を 取得 ma 設定 する 本 641 
ロ NEPDINT 量 再生 開始 時 間 の 設定 と 再生 時 間 の 取得 に は 
[currentTime] プロ バテ ィ を 使う 


P ロ LUMN 箇 スマ ー ト フォ ン の 場合 の 「currentTime」 プロ パテ ィ 


映像 の 長 さ を 調べ と OOCCCTCPPPCCCCEEEYPCESYCIEKCHHKCKYEKKLKYSYKYYYKKYS と 643 
ロ NEP ロ INT 量 映像 の 長 さ を 取得 する に は 「duration] プ ロ パ ティ を 使う 
指定 し た 形式 の 映像 が 再生 可能 か どう か 調べ る …… oo ono 645 


ロ NEP ロ INT 重 映像 ファ イル の 形式 が 再生 可能 か 調べ る に は 
[canPlayType)」 メ ソ ッ ド を 使う 


映像 ファ イル の 読み 込み に 応じ て 変化 する 通信 状態 を 調べ る 
ロ NEP ロ INT 量 通信 状態 を 調べ る に は 「networkState] プロ バ パティ を 使う 


映像 の ボリ ュー ム を 設定 6 ミュ ー ト する 人 め 人 649 
ロ NEPDINT 箇 ボリ ュー ム を 調整 する に は 「Vvolume」 プロパ ティ 、 
ミュ ー ト を 設定 する に は 「muted」 プロ パテ ィ を 使う 


映像 の コン トロ ー ラ ー の 表示 / 非 表示 を 設定 する …oeeotn 652 
ロ NIEP ロ INT 生コン トロ ー ラ ー の 処理 を 行う に は 「controlsS」] プロ バ パティ を 使う 

映像 デー タ を 読み 込む いと 2 よれ い で を YY テイ ヤマ で マセ マス て て 7% エ た マ 1 で YY ん 654 
ロ NEPINT 重 映像 デー タ を 読み 込ま せる に は | src]」 プ ロバ ティ を 使う 

映像 の 再生 状態 を 調べ る を 人 の 厩 電 め : が 0: 656 


ロ NIEP ロ INT 呈 映像 の 状態 を 取得 する に は | currentTirme] プロ バ パティ や 
「paused」 プロ パテ ィ な ど を 使う 
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2 一 映像 の 再生 速度 を 変更 する 659 
ロ NEPDINT 重 再生 速度 を 変更 する に は 「playbackRate」 プロ パテ ィ を 使う 


ロコ 映像 の 再生 時 の イベ ント を 取得 する TTY YY ャ ヤヤ ャ すす で で ャ で アテ ャ すす で ドド で と 661 
ロ NEPDINT 生 映像 の 再生 時 の 処理 を 設定 する に は 「timeupdate」 イベ ント を 使う 

2 ヨコ 映像 の 再生 が 終了 し た 際 の イベ ント を 取得 する …… パ |… ド の 663 
ロ NEPDINT 重 映像 の 再生 が 終了 し た ら 処 理 す る に は 「ended」 イ ベン ト を 使う 

っ 日 5 映像 の ボリ ュー ム が 変更 され た 際 の イベ ント を 取得 する …………… 665 
ロ NEPDINT 還 ポリ ュー ム 変 更 時 の 処理 を 行う に は 「volumechange」 イ ベン ト を 使う 

ロム ら 6 カメ ラ か ら の 映像 を 表示 する 生ま oe の eSE 667 


ロ NEPINT 重力 メ ラ 映 像 を 表示 する に は WebRTC API を 使う 
C ロ LUMN 箇 (GOOgle Chrome で の 設定 
P ロ LUMNI 軒 DDera Mobile で の WebRTC 


ロワ カメ ラ か が か ら の 映像 を Canvas に 描画 する 2 670 
ロ NEPINT 箇 力 メ フラ 映 像 を Canvas に 描画 する に は 「drawlmage () 」 メ ソ ッ ド の 
最初 の パラ メー タ に [video」 要 素 を 指定 する 


ロロ LUMN 箇 GOOgle Chrome で の 設定 


ク 日 日 カメ ラ で 撮影 し た 画像 を 表示 する の で る やら の るみ の の 本 2 re る 生ま 科 390s eS 673 
ロ NEPDINT 画 力 メラ で 撮影 し た 画像 を 表示 する に は HTML Media Capture を 使う 
ビ ロ LUMNI 還 ビデ オカ メラ と マイ ク か ら の 取り 込み 
ロロ LUMN 画 [Capture」 属 性 に 指定 で きる 値 


2 昌紀 カメ ラ で 撮影 し た 画像 を Canvas に 描画 する ……………………… 676 


ロ NEPINT 画 力 メ フラ で 撮影 し た 画像 を Canvas に 描画 する に は 「Image 」 オ ブ ジ ェクト の 
「onload] プロ パテ ィ に イベ ント ハン ドラ を 設定 する 


HAPTER 12 自 避 に 夫 | 


9 口 ファ イル 名 や 種類 を 取得 する ーー りつ し ここ 680 
ロ NEPINT 画 ファ イル 情報 を 取得 する に は 「name」 プロ パテ ィ や 「size 」 プロ パテ ィ 、 
| tyDe」 プロ パテ ィ を 使う 


26 1 テキ スト ファ イル を 読み 込む 69: 大き: の 07 あま あき esa 683 
ロ NEP ロ INT テ キス ト フ ァイル を 読み 込む に は 「readAsText() 」 メ ソ ッ ド を 使う 


9 ロ の バイ ナリ ファ イル を 読み 込む 本 生ま が が る が 9: あ (生生 ae 685 
ロ NEPDINT 重 バイ ナリ ファ イル を 読み 込む に は 
「readAsBinaryString() 」 メ ソ ッ ド を 使う 


ビー ロ つ 画像 や 映像 ファ イル を 読み 込む の 人 党 300!0!e. の 仙人 な あき 687 
ロ NEPINT 箇 画像 ファ イル や 映像 ファ イル を 読み 込む に は 
[readAsDataURL()」 メ ソ ッ ド を 使う 





ワウ ワ ノ 4 ファ イル の 読み 込み 状況 を 表示 する (0168 aa: 689 
ロ NEPDINT 還 ファ イル の 読み 込み 状況 を 表示 する に は 「progress」 イ ベン ト を 使う 
95 指定 し た ディ スク 容量 が 使用 可能 か 調べ る 上 … ひ 〇 び (……※… い …ー………… バ 691 


ロ NEP ロ INT 箇 使用 可能 な 割り 当て 容量 を 調べ る に は 
[window.storagelnfo.requestQuota() 」 メ ソ ッ ド を 使う 
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ら ワ 6 ディ スク の 使用 状況 を 調べ る …0rerrooieeeeeeoeerrrrrnrrrrrnr 694 
ロ NEPINT 因 ディ スク の 使用 状況 を 調べ る に は 
「window.storagelnfo.queryUsageAndQuota()」 メ ソ ッ ド を 使う 


の ロ ar ファ イル な を 作成 する る 696 
ロ NEP ロ INT 還 ファ イル を 作成 する に は 「window.requestFileSystem()」 メ ソ ッ ド と 
[fs.root.getFile () 」 メ ソ ッ ド を 使う 


ン ロ 日 ファ イル に テキ スト を 書き 込む 8: 699 
ロ NEP ロ INT 箇 ファ イル に テキ スト を 書き 込む に は 「createWriterU」 メ ソ ッ ド と 
「BlobBuilder」 オ ブ ジ ェクト を 使う 


ロロ LUNMNI 画 [getBlOD()」 メ ソ ッ ド の 動作 の 違い 


の ロワ ロ 保存 され て いる ファ イル の 内 容 を 読み 出す 6 702 
ロ NEP ロ INT 箇 保存 ご れ て いる ファ イル の 内 容 を 読み 出す に は 
[fs.root.getFile() 」 メ ソ ッ ド と 「FileRHeader」 オ ブ ジ ェクト を 使う 


う コロ ロロ 保存 ご れ て いる ファ イル を 削除 する 7 か セコ チッ で で アレア スッ 705 
ロ NEP ロ INT 箇 ファ イル を 削除 する に は 「fS.root.getFile()」 メ ソ ッ ド と 
[remove()」 メ ソ ッ ド を 使う 
コロ 1 ディ レク トリ を 作成 する 2 を で や で ザマ イツ で ルイ で キャ エル Tr スト スッ イル セテ 707 


ロ NEP ロ INT 箇 ディ レク トリ を 作成 する に は 「window.requestFileSystemO」 メ ソ ッ ド 
と 「fs.root.getDirectory()」 メ ソ ッ ド を 使う 「 


コロ サブ ディ レク トリ を 作成 する ……iiiiiiiiiiioioiorereeeerrrrrrre 710 
ロ NEP ロ INT 箇 サブ ディ レク トリ を 作成 する に は 「getDirectory(」 メ ソ ッ ド を 使う 
コロ ヨ ディ レク トリ を 削除 する ……0 ie 713 


ロ NEPD ロ INT 箇 デイ レク トリ を 削除 する に は [fs.root.getDirectory(」 メ ソ ッ ド と 
[remove()」 メ ソ ッ ド や 「removeRHecursively()」 メ ソ ッ ド を 使う 


ョ ロス 4 ディ レク トリ ー 覧 を 取得 する い 号 ムー ドド 716 
ロ NEP ロ INT 夏 ディ レク トリ 一 覧 を 取得 する に は 「createReader()」 メ ソ ッ ド を 使う 
コロ うら ファ イル を コピ ーー す る 一 719 


ロ NEPINT 量 ファ イル を コピ ビー する に は 「copyToO」 メ ソ ッ ド と 
[getParent()」 メ ソ ッ ド を 使う 


コロ 6 ディ レク トリ を コピ ビー する 人 722 
ロ NEPDINT 重 ディレク トリ を コピ ー す る に は 「copyTo0」 メ ソ ッ ド と 
「TgetParent()」 メ ソ ッ ド や 「getDirectory()」 メ ソ ッ ド を 使う 


コロ ワ ファ イル の 移動 と ファ イル 名 の 変更 を 行う 二村 725 
ロ NEPDINT 生 ファ イル の 移動 や ファ イル 名 の 変更 に は 「moveTo)」 メ ソ ッ ド を 使う 
上 ロロ 日 URL 形式 で ファ イル に アク セス する 96 728 


ロ NIEPINT 箇 ファ イル や ディ レク トリ は URL 形式 で アク セス する こと が で きる 


27 


IIIIIIIIIEEUTNTENT 晶 卓上 II 


本 の WIe 馬 le IML5 ら の その 他 の API 


コロ 9 一 度 だ け 位 置 情 報 を 求め る の の サイ で ペン テン で で プア の 
ロ NEP ロ INT 年 位置 情報 を 一 度 だ け 取 得する に は Geolocation API の 
|「getCurrentPosition() 」 メ ソ ッ ド を 使う 


う コ 1 口 定期 的 に 位置 情報 を 取得 6 停止 する 生生 735 
ロ NEP ロ INT 凍 定期 的 に 位置 情報 を 取得 する に は 「watchPosition() 」 メ ソ ッ ド 、 
停止 する に は 「clearWatch() 」 メ ソ ッ ド を 使う 


ビ ロ LUMN 画 機能 が 利用 で きる か 調べ る に は 


つ ] ] Wehb Storage に デー タ を 設定 する ee を 家 MOW 演 知る な な かる: 738 
ロ NEPINT 生 スト レー ジ を 利用 する に は 「sessionStorage」 や 
「localStorage」 を 使う 
ココ 1 Web Storage か ら デ ー タ を 読み 出す ーー 740 
ロ NEPDINT 刻 スト レー ジ か ら 読 み 出 す に は [getltem()」 メ ソ ッ ド を 使う 
コ 1 Web Storage 内 の すべ て の キー と 値 を 取得 する ……… | 742 


ロ NEP ロ INT 年 キ ー を 取得 する に は 「key() 」 メ ソ ッ ド を 使う 
ビ ロ LUMN 画 Web Storage に 保存 され て いる 内 容 を 調べ る 


つ ] イオ Web Storage の 特定 の デー タタ を 削除 する で で テン テイ イザ ヤリ) ヤマ つ イ 3 「! て で キャ で だす 744 
ロ NEP ロ INT 邊 特定 の デー タ を 消去 する に は 「removeltem() 」 メ ソ ッ ド を 使う 

ヨ 15 Web Storage の すべ て の デー タ を 削除 する …… oo: 746 
ロ NEPINT 重 全 デ ー タ を 消去 する に は 「clear()」 メ ソ ッ ド を 使う 

ヨ 1 6 スト レー ジ 内 容 が 変更 され た 際 の イベ ント を 設定 する …………… 748 
ロ NEP ロ INT 昼 デー タ 保 存 時 の 処理 を 設定 する に は 「storage」 イ ベン ト を 使う 

3 1 ワ ワー カー オブ ジェ クト を 生成 する や K で て 1 で タイ Y て ツ ツ ヤ デ ァ ヤキ 750 
ロ NEP ロ INT 軒 ワー カー オブ ジェ クト を 作成 する に は 「new Worker() 」 を 使う 

う 1 日 ワー カー に デー タ を 渡す (人 10 全 の 人 当る あな 5 752 
ロ NEPDINT ワ ー カ ー と や り 取 りす る に は 「postMessage()」 メ ソ ッ ド を 使う 

ヨコ 1 9 ワー カー 側 で JavaScript フ ァイル を 読み 込む …… oi 754 


ロ NEPINT 軒 ワー カー 側 で JavaScript フ ァイル を 読み 込む に は 
[importScripts () 」 メ ソ ッ ド を 使う 


と 回 ワー カー を 終了 する ES 756 
ロ NEP ロ INT 軒 ワー カー を 終了 する に は 「terminate()」 メ ソ ッ ド や 
[close() 」 メ ソ ッ ド を 使う 
コク 1 オフ ライ ン / オ ン ラ イン 状態 を 調べ る 牧人 759 
ロ NEPINT 還 オン ライ ン か が どう か 調べ る に は 「onLine」 プロ パテ ィ を 使う 
コン ワン ン ワン アプ リケーション キャ ッシュ を 更新 する うそ 760 


ロ NEPDINT 還 ア プリ ケー ショ ン キ ャ ッシュ を 更新 する に は 
| SwapCache()」 メ ソ ッ ド を 使う 


コワ ココ タッ チ 数 を 求め る 二宮 764 
ロ NEP ロ INT 置 同時 タッ チ 処 理 を 行う に は タッ チ 関 係 の イベ ント を 使う 
ピロ し UM ト I 画 同 時 タッ チ 数 の 制限 
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コジ 


コク つら 


コジ ら 6 


コソ / 


う ジ 日 


コラ フワ ヴ 


う 3 コロ 


う コ 1 


う ココ 


う コ ゴゴ 


ココ ノイ 


こ か ミー 


ココ 6 


2 0 / 


タッ チ さ れ た 座標 を 求め る 間 て ザ サーヤ で を で とも て 3 の 5 で て だ Y ア プイ ーッ いて を で マ と 766 
ロ NEPINT 呈 タッ チ さ れ た 座標 を 調べ る に は 「clientX」「clientY」「pageX」 
「pageYl「screenX」「screenY」 を 使う 


加速 度 セ ン サ ー の 値 を 求め る … (の rr ee 768 
ロ NIEP ロ INT 重 加速度 セン サー を 扱 つ に は 「devicernmotion」 イ ベン ト を 使う 

ジャ イ ロロ センサー の 値 を 求め る 2 770 
ロ NEPDINT 箇 ジャ イロ セン サー を 扱う に は 「deviceorientation」 イ ベン ト を 使う 

ジェ スチ ャ ー さ れ た ら 拡 大 や 回 転 処理 を 行 つ Re 772 


ロ NEPDINT 画 ジェスチャー に よる 回 転 と 拡大 ・ 縮 小 を 行 つ に は 
[gesturechange」 イ ベン ト な ど を 使う 


デバ イ ス が 回 転 し た ら 処 理 を 行う や ーー て プー イア 774 
ロ NEP ロ INT 生 デバ イス の 回 転 時 に 処理 を 行 つ に は 
[orientationchange」 イ ベン ト を 使う 


日 付 の 入力 を 行う よう に する 2: 776 
ロ NEPDINT 重 日 付 を 選択 する に は 「input」 要 素 の 「type」 属 性 に 「date」 を 指定 する 


日 時 の 入力 を 行う よう に する …eiiiiooonoeoooeoeooeenererrrrrrrr 778 
ロ NEP ロ INT 重 日 付 と 時 間 を まとめ て 選択 する に は 「input」 要 素 の 「type」 属 性 に 
[datetime」 を 指定 する 


メー ル や URL、 電話 番号 を 入力 する 専用 フィ ー ル ド に する ………… 780 
ロ NEP ロ INT 量 メー ル ア ド レス や URL の 入力 専用 フィ ー ル ド に する に は 
[inputl 要素 の 「type」 属 性 に [email」 や 「url」 を 指定 する 


数 値 入力 ・ ス ライ ダー 入力 の 専用 フィ ー ル ド に する ……et… 782 
ロ NEP ロ INT 重 数 値 入力 専 用 に する に は 「input」 要 素 の |「type」 属 性 で 
[number」 を 指定 する 


力 ラ ー ビ ピッ カー を 表示 する まあ 9 784 
ロ NEP ロ INIT 重 力 ラ ー ピ ッ カ ー を 表示 する に は 「input」 要 素 の 「type」 属 性 に 
[color」 を 指定 する 


デー タリ スト を 定義 する SN ーー キマ デア 786 
ロ NEP ロ INT 箇 デー タリ スト を 表示 する に は |「datalist」 要素 を 使う 


音声 入力 を 行う oo お 9 を (868: の 人) 006 和 :  : の 788 
ロ NEP ロ INT 還 音声 入力 を 行う に は 「input」 要素 に 
[「x-webkit-speech]」 属 性 を 指定 する 


ブラ ウザ の ペー ジ 読 み 込み タイ ミン グ を 取得 する …… ぐ の 790 
ロ NEPDINT 重 読み 込み タイ ミン グ を 取得 する に は 
「performance.navigation]」 オ ブ ジ ェクト の 各種 プロ パテ ィ を 使う 


C ロ LUNMN 箇 三 リ 秒 以下 の 計測 

異な る オリ ジン の イン ライ ン フ レー ム に メッ セー ジ を 送信 する …… 793 

ロ NEP ロ INT 置 イン ライ ン フ レー ム に メッ セー ジ を 送信 する に は 
[postMessage()」 メ ソ ッ ド を 使う 
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づ ヨ 日 


コロ 


コイ 1 


うら オジ 


コイ オ コ 


コ オ イイ 


人 イ 5 


うら 6 


コイ オプ 


ご け 日 


に スジ 


うら 5 口 


映像 を フル スク リー ン 表 示 に する oe 林内 が の の の の す 6 の が お あの 人 可 す る も の の も か の る る ゆあ ゃ も や の あみ も eeeog.。 796 
ロ NEPINT 箇 映像 を フル スク リー ン に する に は [video」 要 素 の 
[requestFullscreen() 」 メ ソ ッ ド を 使う 


ビビ ロ LUMN 一 FulISCreen API の ベン ダー プレ フィ ックス 


画像 を フル スク リー ン 表 示 に する 9 入間 委 な 信和: 稼 お 6! 799 
ロ NEPDINT 箇 画像 を フル スク リー ン に する に は 「img」 要 素 の 
[requestFullscreen() 」 メ ソ ッ ド を 使う 


ビ ロ LUMN 箇 FUlISCreen API の ベン ダー プレ フィ ックス 


テキ スト を フル スク リー ン 表 示 に する の の すま 生ま 宮寺 802 
ロ NEP ロ INT 箇 テキ スト を フル スク リー ン に する に は テキ スト を 囲ん で いる 要素 の 
[requestFullScreen() 」 メ ソ ッ ド を 使う 


ロロ LUMN 箇 FUIISCreen API の ベン ダー プレ フィ ックス 


イン ライ ン フ レー ム を フル スク リー ン 表 示 に する …………… ド …… 805 
ロ NEPDINT 和 本 イン ライ ン フ レー ム を フル スク リー ン に する に は 
[iframe」 要 素 の 「requestFullscreen() 」 メ ソ ッ ド を 使う 


ビ ロ LUMN 画 FUllSCreen API の ベン ダー プレ フィ ックス 


フル スク リー ン と 通常 表示 が 切り 替わっ た ら 処 理 を 行う …………… 808 
ロ NEP ロ INT 重 画面 切り 替え 時 に 処理 を 行う に は 
[fullscreenchange」 イ ベン ト を 捕捉 する 


バイ レレ ルー る コン 機能 悪態 ee 811 
ロ NEP ロ INT 重 バイ ブレ ーション 機能 を 使う に は Vibration API を 使う 
/ い ッ テリ ー の 充電 レベ ル を 取得 する 2 サヤ トト ティト マン ドレ ソ ーー 813 


ロ NEPDINT 箇 バッ テリ ー の 充電 レベ ル を 取得 する に は 
| battery」 オ ブ ジ ェクト の 「level] プロ パテ ィ を 使う 


バッ テリ ー の 充電 状態 を 取得 する ーー 815 
ロ NEPINT 箇 バッ テリ ー の 充電 状態 を 取得 する に は 
[batteryl オ ブ ジ ェクト の 「charging] プロ パテ ィ を 使う 


/ い ッ テリ ー の 充電 状態 が 変 1 L し た ら 処 理 を 行う ee 817 
ロ NEPINT 箇 充電 状態 が 変化 し た 場合 に 処理 を 行う に は 
| chargingchange」 イ ベン ト を 使う 


バッ テリ ー レ ベル が 変化 し た 場合 に 処理 する …t② 泊 …………………… 819 
ロ NEPDINT 箇 バッ テリ ー レ ベル が 変化 し た 場合 に 処理 する に は 

[levelchange」 イ ベン ト を 使う 
ゲー ム パ バッド が 使用 可能 か 調べ る 上 …t バ q 乗 人 つ (q つ ー ニ ニ ム オ ーー ド ーーー 821 


ロ NEP ロ INT 還 ゲー ム パ バッド を 使用 可能 か 調べ る に は 「gamepads」 オ ブ ジ ェクト を 使う 
ロロ LUNMN 画 ゲー ム パ ッ ド を 有効 に する に は 


要素 内 の 文字 を 編集 可能 | こす る 9 の な る も ya 823 
ロ NEP ロ INT 箇 要素 内 の 文字 や 画像 を 編集 する に は 
[contentEditable」] プロ パテ ィ を 使う 


WebSocket が 使用 可能 か 調べ る …… ひ (… … 上 の (i ぬ mK バ Keーーーーー…ー…… 825 
ロ NEPDINT 箇 WeDSocket が 利用 で きる か どう か は 
[WebSocket」 オ ブ ジ ェクト の 有無 を 調べ る 
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WebSocket で サー/ \ー に 接続 する る 和む 9 se efe69e 827 
ロ NEP ロ INT 箇 サー バー に 接続 する に は 「new WebSocket()」 と する 


WebSocket を 使っ て サー バー と デー タ を や り 取 りす る …… の の oi 829 
ロ NEPDINT 画 サー バー と や り 取 りす る に は メッ セー シ ジ 送 信 を 使う 

ロロ LUNMN 軒 NOde.jS と は 

ビ ロ LUNMNI サ ンプ ル の 動作 に つい て 


Indexed Database が 使用 可能 か 調べ る 
ロ NEP ロ INT 生 Indexed Database が 使用 で きる かど つ か は 
[IndexedDB」 オ ブ ジ ェクト の 有無 を 調べ る 


Indexe ロ Datahase で デー タベース を 開く 0 6: 835 
ロ NEPDINT 箇 Indexed DataDase で デー タベース を 開く に は 
[open()」 メ ソ ッ ド を 使う 


Indexed DataDase で オブ ジェ クト スト ア を 作成 する 
ロ NIEPDINT 還 Indexed DataDase で オブ ジェ クト スト ア を 作成 する に は 
[createObjectStore()」 メ ソ ッ ド を 使う 


Indexed DataDase に デー タ を 書き 込む 
ロ NEP ロ INT 還 オブ ジェ クト スト ア に デー タ を 書き 込む に は トラ ン ザ クシ ョ ン を 利用 する 
LUNMN 画 Indexed Database の 仕様 変更 て サン プル の 動作 に つい て 


Indexed Database か ら デ ー タ を 読み 出す 
ロ NEP ロ INT 邊 オブ ジェ クト スト ア の デー タ を 読み 出す に は トラ ン ザ クシ ョ ン を 利用 する 
ビ ロ LUMN 箇 Indexed Database の 仕様 変更 て サン プル の 動作 に つい て 


Web Audio が 使用 可能 か 調べ で る … rorrooooorerererrerererrrrrrrr 848 
ロ NEPDINT 重 Web Audio が 利用 で きる が どう が は 
「audioContext」 オ ブ ジ ェクト の 有無 を 調べ る 


Wehb Audio で 音 を 鳴ら す EPS ペ て の 5 れん 850 
ロ NEPDINT 重 Web Audio API で 音 を 鳴ら す に は オー ディ オ コ ン テキ スト を 生成 する 
Web Audio で ファ イル を 読み 込ん で 演奏 する …… ent 852 


ロ NEPINT 重 Web Audio API で オー ディ オフ ァイル を 演奏 する に は 
非同期 通信 を 使っ て ファ イル を 読み 込ま せ て お く 


Web Audio で ボリ ュー ム を 指定 する 0 855 
ロ NEPDINT 重 Web Audio API で ボリ ュー ム を 指定 する に は 
[createGainNode()」 メ ソ ッ ド を 使っ て ゲイ ン ノ ー ド を 生成 する 


Pointer Lock API が 使用 可能 か 調べ る ーー トド 857 
ロ NEPDINT 箇 マウ スポ イン タ が ロッ ク 可 能 か どう つか 調べ る に は 
[requeStPointerLock()」 メ ソ ッ ド の 有無 を 調べ る 


タブ 切り 換え た 場合 に 処理 を 行う ……( じ (oi 859 
ロ NEPDINT 鼻 タブ が 切り 替わっ た と き に 処理 を 行う に は 
[visibilitychange」 イ ベン ト を 使う 


要素 を ドラ ッ グ で きる よう に する 生やす で ママ ナマ マイ や と で 862 
ロ NIEP ロ INT 重 要素 を ドラ ッ グ で きる よう に する に は 「draggable] プロ パティ を 使う 
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要素 を ドラ ッ グ & ド ロッ プ で きる よう に する PC ビデ ェ ネッ マト ム アンマー 864 
ロ NEP ロ INT 箇 ドロ ッ プ 側 の 処理 は 「dragover」「dragleave」「drop 」 イベ ント を 使う 


ドラ ッ グ 要素 か ら ド ロ ッ プ 要素 に デー タ を 渡す か 0 あの あの な 間 る 休ま 反 se so 866 
ロ NEPINT 委 デー タ を 受け 渡す に は 「setData()」 メ ソ ッ ド を 使う 


通知 可能 か どう か 調べ る ……… の ii ドド ドド トー 869 
ロ NEPINT 入 通 知 が 利用 で きる か どう か は 
[webkitNotifications]」 オ ブ ジ ェクト の 有無 で 調べ る 
C ロ LUMN 画 Safari 6 で の 動作 に つい て 
ビ ロ LUMN 画 (GOOgle ChrOome で の 動作 に つい て 


通知 す る いい 872 
ロ NEP ロ INT 征 通知 する に は 「createNotification () 」 メ ソ ッ ド を 使う 

通知 を 消す 生生: 人 70 874 
ロ NEPDINT 生 通知 を 消す に は 「cancel() 」 メ ソ ッ ド を 使う 

通知 に 関す る イベ ント を 処理 する (2 8 876 


ロ NEP ロ INT 年 通 知 に 関す る イベ ント を 処 理 す る に は 
[Notification]」 オ ブ ジ ェクト の イベ ント を 利用 する 


丁 選 WEgIe 馬 時 絹 スタ イル シー ト 


コノ /1 


7 人 


う / コ 


づ / イ 


| が 2 


0 


づ う / プ 


づ ソロ 


スタ イル シー ト を 生成 する / 読 み 込む の ダイ ベタ で ミン て: と で いて フタ ヤツ で マイ 880 
ロ NEPDINT 箇 スタ イル シー ト を 生成 し た り 読み 込ん だ りす る に は 
[document.createElement() 」 メ ソ ッ ド を 使う 


スタ イル シー ト プ ロ リ (ティ の 値 を 設定 する る 0 ザ あめ か 6: サ 9 物 510 は: 入 な は 生 な あな 882 
ロ NEPDINT 生 スタ イル シー ト プ ロ パテ ィ の 値 を 設定 する に は 
要素 の | style」 オ ブ ジ ェクト の 各 プ ロ パ ティ に 値 を 書き 込む 


スタ イル シー ト の 値 を 読み 出す とい テイ に 884 
ロ NEPDINT 箇 スタ イル シー ト の 値 を 読み 出す に は 
要素 の 「style」 オ ブ ジ ェクト の 各 プ ロ パ ティ を 参照 する 


文字 の 色 を 変更 する 計 多 の の の 当家 介 仙人 生 10 人: ああ: 介 凍 9 宮寺 886 
ロ NEPOINT 重 文字 の 色 を 変更 する に は スタ イル シー ト の 「color」 プロパ ティ を 使う 

文字 の サイ ズ を 変更 する 人 年 : る . の 中 人 ' あ きす る 1 の: の すま 訴 る by7 お る を る まさき aomreerece 888 
ロ NEPDINT 軒 文字 の サイ ズ を 変更 する に は 「fontSize」 プロ パテ ィ を 使う 

文字 の 書体 を 変更 する 本 さ 二 な る せる ei0Metd ゆ ひび の 守る を せる び か が ee も お る 6 3 考 ま さき 4 ね まる ae 889 


ロ NEPDINT 征 文字 の 書体 を 変更 する に は 
スタ イル シー ト の 「fontFamily」 プロ パテ ィ を 使う 


ビビ ロ LUNMN 罰 |)G ら で の フォ ント 


文字 の 太 さ を 変更 する ok0635ryeseosersxctee 和 62 891 
ロ NIEPINT 還 文字 の 太 さ を 変更 する に は 
スタ イル シー ト の 「fontWeight| プロ パテ ィ を 使う 


文字 の スタ イル を 変更 する 0 は 滞 生 赤 和 人 は 人 ま ら の" 二 2 人 258 あ が 5 る 893 
ロ NEP ロ INT 重 文字 の スタ イル を 変更 する に は 
スタ イル シー ト の 「fontStyle」] プロ パテ ィ を 使う 
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文字 の 形状 を 変更 する …… の io 895 
ロ NEP ロ INT 入 文字 の 形状 を 変更 する に は 
スタ イル シー ト の 「fontVariant」 プロ パテ ィ を 使う 


文字 の 間隔 を 変更 する ーー 897 
ロ NEPOINT 征 文字 の 間隔 を 変更 する に は 
スタ イル シー ト の |letterSpacing] プロ パテ ィ を 使う 


単語 の 間隔 を 変更 す る 時 ピー と 1 ーー いさ ペ イミ モ リコ て て アシ ンク 899 


ロ NIEP ロ INT 量 単語 の 間隔 を 変更 する に は 
スタ イル シー ト の 「wordSpacing」 プロ パテ ィ を 使う 


行間 を 変更 す と COCOPCPPEPPEPPPPEPPPEYYEYYEPYYSPCCYYEPEEEPCECECCECYCEEEEEYED 90 1 
ロ NEPINT 生 行間 を 変更 する に は スタ イル シー ト の 「IineHeight]」 プロ パテ ィ を 使う 


行 抽 え を 変更 す と EPCPEPPPPPPPPPPPPPPPPPPPPPECPEPPCPTEPPPPPCPCCEYYPPTCPCYYYE 902 
ロ NEP 品 INT 量 行 揃え を 変更 する に は スタ イル シー ト の 「textAIign] プロ パテ ィ を 使う 


文字 を 装 人 委 する 2 904 
ロ NEP ロ INT 軒 文字 を 装飾 する に は 
スタ イル シー ト の 「textDecoration] プロ パテ ィ を 使う 


字 下 げ ( イ ン デ ント ) を 変更 する 二 放 を 9 人 泊 共 の 5 ボ 和 め ::(:(-: 906 
ロ NIEPINT 恒 字 下 げ ( イ ン デ ント ) を 変更 する に は 
スタ イル シー ト の 「textIndent] プロ パテ ィ を 使う 


英文 字 の 表示 形式 を 指定 す る ee 907 
ロ NEP ロ INT 量 英文 字 の 表示 形式 を 指定 する に は 
スタ イル シー ト の 「textTransform」 プロパ ティ を 使う 


文字 | こ 影 を 表示 する 則 を やく か どす や や て マイ て セル ザキ マン 909 
ロ NEPO ロ INT 量 文字 に 影 を 表示 する に は 
スタ イル シー ト の 「textShadow」 プロ パテ ィ を 使う 


要素 の 背景 色 を 変更 す る 0 か ゲッ っ すか SPP て て 910 
ロ NEP ロ INT 中 要素 の 背景 色 を 変更 する に は 
スタ イル シー ト の 「color」 プロ パテ ィ を 使う 


要素 の 背景 画像 を 変更 する 人 81178 和信 912 
ロ NEP ロ INT 量 要素 の 背景 画像 を 変更 する に は 
スタ イル シー ト の 「backgroundlmage」 プロ パテ ィ を 使う 


要素 の 背景 画像 の 位置 を 変更 す る キー ん 1 9 衝 を ーー の で 、 914 
ロ NEP ロ INT 呈 要素 の 背景 画像 の 位置 を 変更 する に は 
スタ イル シー ト の 「backgroundPosition] プロ パテ ィ を 使う 


要素 の 背景 画像 の 繰り 返し 方 法 を 変更 す る ブッ で も トン 916 
ロ NIEPINT 量 要素 の 背景 画像 の 繰り 返し 方 法 を 変更 する に は 
スタ イル シー ト の 「backgroundRHepeat」| プロ パテ ィ を 使う 


背景 画像 の 固定 方 法 を 変更 す る ee お た の 918 
ロ NIEPINT 中 要素 の 背景 画像 の 固定 方 法 を 変更 する に は 
スタ イル シー ト の 「backgroundAttachment」 プロ パテ ィ を 使う 


IIIIIIIIIIIIIIIIIIIIIIIIIHIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIE BNTENT 昌 II 


KK) 


IIIIIIIIIIIIE ENITENT 日 IIIIHIIIIIIIIIIHIIIIIIIIIIIHIIHIIIIHIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIHIIIH 


34 


う ワ コ 


う ワ オイ 


きら 


う 96 


9 / 


9 日 


うり ワウ 


人 4 ロロ 


作品 1 


人 4 ロジ 


介 口 コ 


人 オロ オ 


介 口 5 


人 4 ロロ 6 


要素 の 位置 を 変更 する 上 上 ①! ヨ 上 人 ( 識 ee 920 
ロ NIEPINT 邊 要 素 の 位置 を 変更 する に は 
スタ イル シー ト の 「position 」 プロ パテ ィ を 使う 


要素 の 余 曰 を 変更 す る の. も ie.9 6 る も 6 も 6 る る の る の も お ゆで の 8 を KO さ や ZN の SN 53 生 64 9856 oo 3。 922 
ロ NEP ロ INT 重 要素 の 才 白 を 変更 する に は 
スタ イル シー ト の |「margin]」 プロ パテ ィ や 「padding」 プロ パテ ィ を 使う 


要素 の 枠 を 変更 す る で で 9 る oop eee.9. の や の 6 も る も で で SWW 0 家 光 WIR 生 3 本 88 も が 。 。 。 ば 。 。 924 
ロ NIEPINT 重 要素 の 枠 を 変更 する に は スタ イル シー ト の 「border」 プロ パテ ィ を 使う 
要素 の 表示 形式 を 変更 する 誠人 2 全く 926 


ロ NIEPDINT 量 要素 の 表示 形式 を 変更 する に は 
スタ イル シー ト の 「display」 プロ パテ ィ を 使う 


要素 の 横幅 e 紙 過 を 変更 する 証人 : 導 の be: 二 are き 928 
ロ NEPDINT 重 要素 の 横幅 を 変更 する に は スタ イル シー ト の 「width」 プロ パテ ィ 、 
縦 幅 を 変更 する に は スタ イル シー ト の 「height| プロ パテ ィ を 使う 


ロロ LUNMN 画 IPhOne/Android で 表示 領域 の サイ ズ を 指定 する 


要素 の は み 出 し た 部 分 の 表示 方 法 を 変更 す る シャ 930 
ロ NEPDINT 軒 要 素 の は み 出 し た 部 分 の 表示 方 法 を 変更 する に は 
スタ イル シー ト の 「overflow」 プロ パテ ィ を 使う 


要素 が ら は み 出 し た 文字 の 表示 方 法 を 変更 する …………………… 932 
ロ NEPDINT 箇 要素 の は みだし た 部 分 の 文字 の 表示 方 法 を 変更 する に は 
スタ イル シー ト の 「textOverflow」 プロ パテ ィ を 使う 


要素 の 表示 方 法 を 変更 す る 生生 95 内 934 
ロ NEPDINT 重 要素 の 表示 方 法 を 変更 する に は 
スタ イル シー ト の 「Vvisibility] プロ パテ ィ を 使う 


要素 の Z 座標 を 変更 す る ee 936 
ロ NIEP ロ INT 上 要 素 の Z 座 標 を 変更 する に は 
スタ イル シー ト の 「zIndex」 プロ パテ ィ を 使う 


要素 の 表示 倍率 を 変更 す る で た トル ーーー ント ご ン リヤ 938 
ロ NEPDINT 箇 要 素 の 表示 倍率 を 変更 する に は 
スタ イル シー ト の 「zoom」 プ ロ パ ティ を 使う 


ロロ LUMN 画 スマ ー ト フォ ン で の 表示 倍率 


要素 の 角 丸 を 変更 す る スー 940 
ロ NEPOINT 重要 素 の 角 丸 を 変更 する に は 
スタ イル シー ト の 「borderRHadius] プロ パテ ィ を 使う 


要素 に 影 を 表示 す る 上 の ……… ド の ドド ドド < に て 信 tert 942 
ロ NEP ロ INT 量 要素 に 影 を 表示 する に は 
スタ イル シー ト の 「boxShadow」 プロパ ティ を 使う 


不透明 度 を 指定 す と CCCCCCCKYYYYYPPCPYYCPPPCCPPPCPPPPPPPPPPPPPPPYYYYYYYYYYYYPY で PP 944 
ロ NEP ロ INT 箇 不透明 度 を 指定 する に は スタ イル シー ト の 「opacity」 プロ パテ ィ を 使う 
リサ イ ズ 処 理 を 指定 す る 946 


ロ NEPDINT 箇 要素 を リサ イズ する に は スタ イル シー ト の 「 resize」 プロ パテ ィ を 使う 


IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIE BUHNTENT III 


人 4 ログ 


4 ロロ 


介 ロ ロラ 


人 1 ロロ 


介 1 1 


介 1 ジ 


介 1 コ 


41 オイ 


介 15 


416 


介 1 プ 


アニ メー ショ ン 時 間 を 変更 する ちの の 9 の の (の 0 の 8 が さき) 仙人 9 を す @: の 5 全 の 948 
ロ NIEPDINT 還 アニ メー ショ ン 時 間 を 変更 する に は 
スタ イル シー ト の 「animationDuration」 プロ パテ ィ を 使う 


3D 変 形 を 行う 1 人 人 (深き 950 
ロ NEP ロ INT 量 3D 変 形 を 行う に は スタ イル シー ト の 「transform] プロ パテ ィ を 使う 
トラ ンジ ショ ン を 設定 する すこ し) 952 


ロ NEPOINT 還 トラ ンジ ショ ン を 設定 する に は 
スタ イル シー ト の 「transition] プロ パテ ィ を 使う 
埋 義 >ー ン フル b も 必至 漠 肝 ま 科 | の ビート ommeommmmeemmeree 954 
ロ NEPINT 生 グレ ー ス ケー ル に する に は スタ イル シー ト の 「fijlter」 プロ パテ ィ に 
[「"grayScale( 値 )"| の 文字 列 を 指定 する 
ピロ LUMN 画 |[ 衝 ter| プロ パテ ィ の プロ パテ ィ 名 に つい て 


要素 を セピア 調 に する ……tirreo で et 956 
ロ NEPDINT 重 セピア 調 に する に は スタ イル シー ト の 「filter] プロ パテ ィ に 

「"sepia( 値 )| の 文字 列 を 指定 する 
P ロ LUMN 箇 [人 ter] プロ パテ ィ の プロ パテ ィ 名 に つい て 


要素 に トー ン ( 色 相 変 換 ) フィ ル タ タ を 適用 する 0 958 
ロ NEP ロ INT 生 ト ー ン (色相 ) を 変更 する に は スタ イル シー ト の 「 filter」 プロ パテ ィ に 
"hue-rotate( 値 )"」 の 文字 列 を 指定 する 


ピロ LUMN 画 [fiter| プロ パテ ィ の プロ パテ ィ 名 に つい て 


要素 に 色 反 転 フ ィ ル タ を 適用 する 分隊 二天 960 
ロ NEPDINT 量 色 は 反転 させ る に は スタ イル シー ト の 「filter」 プロ パテ ィ に 
"invert( 値 ) 中 の 文字 列 を 指定 する 


ロロ LUMN 画 fiter| プロ パテ ィ の プロ バテ ィ 名 に つい て 


要素 の 輝度 (明る さ ) を 変更 する Ne 962 
ロ NEP ロ INT 重明 る さ を 調 整 す る に は スタ イル シー ト の 「 fter] プロ パテ ィ に 
"Drightness( 値 )"] の 文字 列 を 指定 する 


ロロ LUNMN 画 | 舌 ter| プロ パテ ィ の プロ バテ ィ 名 に つい て 


要素 の コン トラ スト を 変更 する 電電 965 
ロ NEPDINT 画 コン トラ スト を 調整 する に は スタ イル シー ト の 「 fiter」] プロ パテ ィ に 
「"contrast( 値 )"| の 文字 列 を 指定 する 


ピロ LUMN 画 | 舌 ter| プロ バテ ィ の プロ パテ ィ 名 に つい て 


要素 の 彩 度 を 変更 する 和博 968 
ロ NEP ロ INT 重 彩 度 を 調整 する に は スタ イル シー ト の !| filter」 プロ パテ ィ に 
"saturate( 値 )"| の 文字 列 を 指定 する 


ピロ LUNMN 箇 人 和 ter| プロ パテ ィ の プロ パテ ィ 名 に つい て 
ロ LUMN 軒 その 他 の CSS フ ィ ル タ 


要素 に ぼかし フィ ル タ タ を 適用 する 二宮 0 吉信 97 1 
ロ NEP ロ INT 箇 ぼかす に は スタ イル シー ト の 「filter] プロ パテ ィ に 

["Dlur( 値 )」 の 文字 列 を 指定 する 
ビ ロ LUMN 画 | 刊 ter| プロ パテ ィ の プロ バテ ィ 名 に つい て 
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4 1 日 CSS の メデ ィ ア クエ リ を 調べ る OPTYYUPPCCLYLTYLCYPLLYKYL エ IKEYYYY ャ KFE 973 
ロ NEP ロ INT 量 メディ アク エリ が 変化 し た ら 処 理 す る に は 
[window.matchMedia()」 メ ソ ッ ド と 「addListener() 」 メ ソ ッ ド を 使う 
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LIE6 」 Chrome 』 Safari 5 』 Firefox 4 1 Opera 11 1 iOS 4 | Android2 IWP 
5EC ビ TIHN- ロ ロロ 1 


JavaScript の 概要 


LL 


WInteYIeles に ん 前 ココ 」 コ ッ マロ ロ 


旧 JavaScript と は 
JavaScript は 数 ある スク リプ ト 言 語 の 1 つ で す 。 JavaScript は 多く の ブラ ウザ に 搭載 され て 
お り 、 Web ア プリ ケー ショ ン の 実現 に 欠か せな い 言 語 と な っ て いま す 。 特に HTML5 の 登場 で 
3D 処 理 や 並列 処理 、 カメ ラ か ら の リア ル タ イ ム 取 り 込 みな ど 、 これ まで より も 大 幅 に 実現 で きる 
処理 が 増え て お り 、 従来 の JavaScript と は 役割 も 作成 さ れる プロ グラ ム の 規模 や 複雑 さも 大 き 
く 変 わっ て き て いま す 。 この た め 、 作成 し た ]avaScript プ ログ ラム が 正しく 動作 する か を テス ト 
する JSUnit (http://WwwwJjsunitnet/) や QUnit (http://qunitjs.com/) な どの ツー ル る 登場 
し て いま す 。 も ちろ ん 画像 を 入れ替え る だ け 、 入力 フォ ー ム の チェ ッ ク を 行う だ け と いっ た 従来 
通り の 簡単 な 処理 も で きま す 。 
p さま ざま な 場面 で 使わ れ て いる 
JavaScript は Internet Explorer や Firefox、 Safari、 Google Chrome な どの ブラ ウザ に 
可 捨 載 され て いる た め 、 プラ ウザ 専用 の スク リプ ト 言 語 と 思わ れ が ち で す 。 し か し 、 JavaScript 
は OS で ある Windows、 Adobe Photoshop な どの アプ リケーション 、 Adobe Flash や PDF 
3 な ど に も 搭載 され て お り 、 さま ざま な 場面 で 使わ れ て いま す 。 また 、 HTML5(http://www. 
w3.org/TR/html5/) の 普及 に 伴っ て スマ ー ト フォ ン 上 で 動作 する アプ リケーション を 駆動 す 
る 言語 と し て も 利用 され 始め て いま す 。 た と えば 、 Titanium (http://www.appcelerator. 
com/) や PhoneGap (http://phonegap.com/) な どの スマ ー ト フォ ン 向 け ア プリ 開発 の フレ ー 
: ム ワ リー ク で TavaScript が 使わ れ て いま す 。 
軸 p JavaScript の 基本 仕様 
ーー JavaScript の 基本 と な る 部 分 の 仕様 は KCMA に より 公開 され て お り 、ECMA Script と 呼 
ば れ て いま す 。 この 基本 部 分 に プラ ウザ や アプ リケーション が 独自 の オブ ジェ クト を 追加 し た も 
の が 、 一 般 的 に いわ れる TavaScript で す 。 
また 、 マイ クロ ソフ ト 社 の 場合 は 、 javaScript と 互換 性 を 持っ た 独自 拡張 の スク リプ ト 言 語 で 
ある JScript と し て プラ ウザ な ど に 実装 され て いま す 。 JScript で は Windows 固 有 の Active X 
を 利用 し た 処理 (ファ イル 処理 な ど ロ ー カ ル 環 境 の 制御 な ど ) も 可能 に な っ て いま す 。 た だ し 、 
HTML5 の 普及 に 伴っ て 直接 、 ファ イル 処理 や デバ イス へ の アク セス が 可能 に な っ て き て いる 
た め 、 Active X を 利用 し た 処理 の 必要 性 は 低下 し て いま す 。 
e ECMA Script-26 ら 
http://Www.ecma-international.org/publications/standards/Ecma-262.htm 
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Standards 


-。 smnars Standard ECMA-262 
Ra 本 と CMASc/7p 7gn90g96 Spec/ 訪 Ca77O/) 


中 本 MEgigon 5.7 une 2077) 


_ This Standard defines the ECMAScript scripting language. 


The following file can be freely downloaded: 


| 
This edition 5.1 of the ECMAScript Standard is fully aligned with third edition of 
「 the international standard ISO/IEC 16262:2011. 


| This ECMAScript Language Specification is also available in HTML file format here- 
「 The previous replaced "historical" editions of this Ecma Standard are available here. 
符 


ぐ Back 


p プロ ト タ イ プ 指 向 の オブ ジェ クト 指向 言語 
]avaScript は java な どの 一 般 的 な クラ ス を 利用 し た も の と 異な り 、 基本 と な る オプ ジェ クト を 


拡張 ・ 派 生き せる プロ ト タ イ プ 指向 の オブ ジェ クト 指向 言語 で す 。 た だ し 、 当初 、 実装 され た 
ブラ ウザ で ある Netscape 2 と 現時 点 の も の で は 異な っ て いる 部 分 が 多く あり ます 。 当初 は プロ 
ト タ イ プ に よる 継承 も な く 、 単純 な オブ ジェ クト 指向 言語 で 、 変数 名 や 文字 数 制限 、 利用 で き 
る オブ ジェ クト な ど 、 多く の 制限 が あり まし た 。 これ が 、 次 第 に 改良 され て 現在 に 至っ て いま す 。 
k ライ ブラ リ 

ブラ ウザ の 普及 と と も に ]avaScript も 改良 され た と は いえ 、 プラ ウザ に よっ て 動作 が 異な る こ 


と も 多く 、 制作 者 泣か せ の 言語 で ある こと も 確か で す 。 これ を 解消 する の が TavaScript ラ イブ 


ラリ で す 。 2012 年 現在 で 最も 多く 利用 きれ て いる の が jQuery ライ ブラ リ で す 。 jQuery は 短い 
コー ド で 多く の 処理 を 実現 で きる の が 魅力 の 1 つ で す 。 また 、 UI 処理 を 行う た め の ラ イブ ラリ や 
スマ ー ト フォ ン 向 け の jQuery Mobile も 用 意 さ れん て いま す 。 その 他 の TavaScript ラ イブ ラリ と し 


て は 中 規模 ・ イ ント ラ ネ ッ ト 向 け の Ext]S(SenchaTouch) 、 大 規模 向け の Dojo ToolKit な ど 


が あり ます 。 









叶 唄 若 上 (T 肝 演 雇 脂 ③1dJOSBABP ーー に ーー 
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LIE6 Chrome Safari 5 Firefox 4 | Opera 11 ! iOS4 」 Android2 |WP_ 


snEE7 TIELJN- じ [JH ロク 
JavaScript の 基本 事項 


上 則 JavaScript の 記述 場所 

JavaScript プ ログ ラム の コー ド は 、 HTML 文 書 内 や 外部 ファ イル と し て 記述 する こと が で き 
ます 。 JavaScript の プロ グラ ム は 、 読み 込ま れる と すぐ に 実行 が 開始 され ます 。 

実際 に 記述 する 場所 に つい て は 、 次 の よう に な り ま す 。 
pHTML/XHTML フ ァイル 内 に 記述 する 場合 

HTML/XHTML フ ァイル 内 に 記述 する 場合 は 、 文書 内 に プロ グラ ムコ ー ド を 書き ます 。 
基本 的 に は 次 の よう に 、 <script>ー</script> タ グ 内 に 記述 し ます 。 HTML4 の 場合 は 
<script> タ グ に 対応 し て いな い ブ ラウ ザ で プロ グラ ム が 表示 され な いよ うに HTML の コメ ント 
| < に -」 と 「// ->」 で 囲み ます 。 HTML5 の 場合 は <script> タ グ だ け で よく 、「type」 属 性 の 指 
定 や コメ ント は 不要 で す 。 

XHTML の 場合 は 、 本 来 は 別 フ ァイル に する の が よい の で す が 、 どう し て も XHTML フ ァイル 
内 に 記述 する 必要 が ある 場合 は 「//<I[CDATA[」 と 「//]]>」 で 囲み ます 。 <script> タ グ は 、 
特に <head> タ グ 内 で な く て も よく 、 <body> タ グ で 囲ま れ た 範囲 で も 問題 な く 記述 で きま す 。 


HTML4 の 場合 





<SCP1Dpt tyDe= "text/]qvascrtDpt"> 
< く ! -- 
ここ に スク リプ ト を 書く 
//--> 
</SCP1Dt> 


HTML5 の 場合 
<SCr1Dt> 
ここ に スク リプ ト を 書く 


</sCr1Dt> 


@⑯ XHTML の 場合 
<SCrtpt tyDe= "text/]qvoscrtDpt"> 
//<! [CDATA[ 
ここ に スク リプ ト を 書く 
//]]> 


</sCr1Dt> 


また 、 HTML4 で デフ ォ ル ト の スク リプ ト 言 語 と し て TavaScript を 指定 する 場合 は 、 次 の 
<meta> タ グ を 指定 し て お きま す 。 


<meta http-equtv="Conternt-Scrtpt-Type" content="text/]avqscrtpt"> 


思 選 古 | ロト | - ロ ロロ 2 mw JavaScript の 基本 事項 


p 外部 ファ イル と し て 記述 する 場合 

外部 ファ イル と し て 使用 する 場合 は 、 純 粋 に スク リプ ト だ け を 記述 し た テキ スト ファ イル を 作成 
し 、 <script> タ グ の 「src」 属 性 で ファ イル 名 を 指定 し ます 。 これ は HTML4 で も HTML5 で も 
同様 で す 。 


<scrtpt src=" フ ァイル 名 .]s"></scrtpt> 


ファ イル 名 の 末尾 (拡張 子 ) は 「js] に する 必要 が あり ます 。「src」 属 性 に は 拡張 子 が | js」 
の ファ イル だ け で な く 、 CGI の パス な ど を 記述 し て 、 結果 を ]avaScript コ ー ド で 返す こと も で きま 
す 。 また 、 JSON 形式 な ど 、 デー タ だ け を 取得 し た い 場 合 に も 利用 する こと が で きま す 。 一 度 、 
読み 込ま れ た スク リプ ト は メモ リ 内 に 残る た め 、 <script> タ グ を 削除 し て も 実行 する こと が 可能 
で すず 。 

また 、 外部 ファ イル の 場合 は 「 同期 」 で 読み 込ま れる た め 、 プロ グラ ムサイ ズ が 巨大 で あっ た 
り 、 解析 に 時 間 が か か っ た りす る と 、 ブラ ウザ の 反応 速度 が 低下 し 、 ペー ジ 表 示 ま で に 時 間 
が か か る 場合 が あり ます 。 そこ で 、 <script> タ グ に は 、 非同期 で スク リプ ト を 読み 込ま せ て 実 
行 す る 属性 が 用 意 さ れ て いま す 。 ファ イル を 非同期 で 読み 込ま せる 場合 に は 、 <script> タ グ 
に 「async」 属 性 (非同期 で 読み 込ま れ 実 行 ) や 「defer」 属 性 (非同期 で 読み 込み 、 実行 は 
ペー ジ 構 築 後 ) を 指定 し ます 。 た だ し 、「async」 属 性 を 指定 する と 、 実行 順序 が 保証 され な い 
の で 注意 が 必要 で す 。 

HTML5 の Web Workers を 利用 し て いる 場合 は 、| importScripts () 」 メ ソ ッ ド に より 、 スク 
リプ ト フ ァイル を 読み 込ま せる こと が で きま す 。 この 場合 、 Web Workers が 非同期 な の で 、 メ 
イン 処理 と は 別に 読み 込ま れ ま す 。 た だ し 、|「importScripts() 」 メ ソ ッ ド で 読み 込む スク リプ ト 
の 読み 込み 順序 と 実行 順序 は 保証 され ます 。 

p タグ 内 に 記述 する 場合 

タグ 内 に 記述 する 場合 に は 、 イベ ント 名 を 記述 し 、「=」 の 後ろ に 実行 する プロ グラ ム を 指定 
し ます 。 イベ ント 名 は 「on」 を 付加 し た 名 称 に な り ま す 。 た と えば 、| click] イ ベン ト を タグ 内 に 記 
述 する 場合 は 、「onclick」 と な り ま す 。 多く の 場合 、 関数 を 呼び 出す よう に な っ て いま す が 、 通 
常 の プロ グラ ムコ ー ド を その まま 記述 する こと が で きま す 。 


<a href="#" oncttck="altert('ok?' う "> て </q> 


「onclick」 や 「onmouseover」 な どの イベ ント 名 は 、 大 文字 で 書い て も 小文字 で 書い て も 動 
作 し ます 。 大 文字 と 小文字 が 混在 し て いて も 問題 あり ませ ん 。 た だ し 、 プロ グラ ム で イベ ント ハ 
ンド ラ と し て 定義 する 場合 に は すべ て 小文字 に する 必要 が あり ます 。 
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上 ヒビ TIN - 口 口 3 
演算 子 に つい て 


則 JavaScript で 使え る 演算 子 

JavaScript に は 基本 的 な 演算 子 の み 用 意 き され て お り 、 高度 な 演算 を 行う 場合 は 「Math | 
オブジェ クト を 利用 する よう に な っ て いま す 。 JavaScript で 使用 で きる 演算 子 は 、 次 の 表 の よう 
に な り ま す 。 ビッ トシ フト な どの ビッ ト 演 算 は 32 ビ ッ ト 長 で 処理 され ます 。 ビッ ト 演 算 以 外 の 計算 に 
関し て は IEEE 754 の 規格 に 沿っ て 処理 が 行わ れ ま す 。 IEEE 754 の 規格 に つい て は 、 次 の 
URL を 参照 し て くだ さい 。 

e IEEE /54 - Wikipedia 

http://ja.Wikipedia.Org/Wiki/IEEE_754 
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則 代入 演算 子 
]avaScript に は 、 代入 演算 子 も 用 意 き され て いま す 。 使用 で きる 代入 演算 子 は 、 次 の 表 の よ 


うに な り ま す 。 





天 敗 装 呂 (T 民 再 添 員 10JOSGBAB「 に に WE:4 ェ Fe 


則 比較 演算 子 
比較 演算 子 は 、 値 の 比較 を 行い ます 。 結果 は | true」 か | false] と な り ま す 。 


比較 油 算 子 | 意味 116 
| 一 。 | 居民 | 
| ー= | 式 が 等 し <、 型 も 等 い | 
| に | が 筐 KG を い | 
[ 








= 左 が 等 し いか 大 きい 


く = 右 が 等 し いか 大 きい 





上 三 項 演算 子 

TavaScript に は 、 条件 に よっ て どちら か 1 つの 値 を 取る 三 項 演 算 子 も 用 意 き れ て いま す 。 三 
項 演算 子 は 、|?」 と |「:」 (コロ ン ) で 区 切っ て 指定 し ます 。 た と えば 、 変数 |b] の 値 に 応じ て 代 
入 する 文字 列 を 変え る に は 、 次 の よう に 記述 し ます 。 


g=(b> 2) ? "2 以上 " : "2 未満 " 


条件 を 満た し た 場合 に は 「?」 直 後 の 値 が 代入 され 、 条件 を 満た し て いな い 場 合 に は 「:] よ 
り 後 ろ の の 値 が 代入 され ます 。 な お 、 三 項 演算 子 に つい て は 、 59 ペ ー ジ も 参照 し て くだ さい 。 
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上 演算 子 の 優先 順位 
演算 子 に は 優先 順位 が 決め られ て いま す 。 優先 順位 は 、 次 の 表 の よう に な り ま す 。 な お 、 


表 の 上 が 優先 順位 が 高く 、 下 に な る ほど と 優先 順位 が 低く な り ま す 。 


優先 順位 演算 子 / 特 殊 演算 子 
















メン バー、 オブ ジェ クト 生成 
人 を) 
|  @ | 滑 隊 提 拉 2 
| 8 | 大 小 、 プ ロ パ ティ チェ ッ ク | < <= > >= in instanceof 

| 9 | 比較 1、 | == に ーー 
| 10 | ビル 演算 / 論 理 積 (ANDD | & _ 

(XOR/EOR) 

| 12 | ビル ル 演算 / 論 理 和 (ORJD | | 
| 性 に 靖 病 凍 半 il 
カン マ 





miml 間 昌 上 較 予約 語 に つい て 


JavaScript(ECMA Script ver 5) で は 、 次 の キー ワー ド は 予約 語 と な っ て いる た 
め 、 変数 名 な ど で 使 用 し な いよ うに し て くだ さい 。 な お 、 const や let な ど 、 一 部 は すでに 
Firefox な どの ブラ ウザ で 使用 され て いま す 。 









W ClaSS W COnSt W enum W eXDOIt 

w exXtendS WImDplementSs WImDOrt winterface 
wlet W DaCKag@e W DrIVate W DrOteCted 
W DuDlic W StatiC W SUDGT W yield 
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唱 JavaScript の リテラ ル 

リテラ ル は 定数 と いう 意味 で 、 そ の 名 通り 、 決ま っ て いる 値 で す 。 プロ グラ ム 中 に 直接 、 語 
述 可能 な 文字 列 や 数 値 な ど び で す 。 TavaScript の リテラ ル は 、 次 の よう に な り ま す 。 
p 数 値 

数 値 は 8 進数 、10 進 数 、16 進 数 や 、e を 使っ た 指数 表記 な ど を 使用 する こと が で きま す 。 
ECMA-262 5.1th で は 、 10 進 数 と 16 進 数 の 数 値 と な り ま す 。 Strict モ ー ド の 場合 も 、 10 進 数 と 
16 進 数 で す (160 ペ ー ジ 参照 ) 。 
p 文字 列 

文字 列 は 、[「 | (シン グル クォーテーション ) 、 また は 、「"」 (ダブ ルク ォ ー テ ーション ) で 囲ん で 表 
現し ます (194 ペ ー ジ 参照 ) 。 


p 真 偽 値 
「 真 ] か 「 偽 」 を 表し ます 。 値 は 「true」 ( 真 )、 ま た は 、「 false」 ( 偽 ) と な り ま す (116 ペ ー ジ 参照 ) 。 
p 正規 表現 
正規 表現 は 、| /」 (スラ ッシュ ) で 囲ん で 表現 し ます (213 ペ ー ジ 参照 ) 。 
P 配列 
配列 は 、「[ 」 と 「] 」 の 間 に 、 値 を 「,」 (カン マ ) で 区 切っ て 記述 し ます (120 ペ ー ジ 参照 )。 
p オブ ジェ クト リテラ ル 


オブ ジェ クト は 、「 [の 間 に プ ロ パ ティ と 値 を セッ ト に し て | key : value」 の 形式 で 、|,」 ( カ 
ンマ ) で 区 切っ て 記述 し ます (90 ペー ジ 参 照 ) 。 
p 関数 リテラ ル (無名 関数 / 匿 名 関数 ) 

関数 に つい て も 、 関数 リテラ ル を 使用 する こと が で きま す 。 これ は 、 無名 関数 や 匿名 関数 と 
呼ば れ て いま す (62 ペ ー ジ 参照 )。 
p 特殊 記号 や Unicode 文 字 

改行 コー ド や タブ な どの 特殊 記号 や Unicode 文 字 は 、|\ 値 | の 形式 で 記述 し ます 。 


: null 
「null | (ヌル ) は 、 何 も な いこ と を 示し ます 。 
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LIE 10 ! Chrome 1 Safari 5 | Firefox 4 』 Opera 11 1 iOS4 」 Android2 」 


Eo まま し は すこ た) し 】 の 


strict モ ー ド と バー ジョ ン の 指定 に つい て 





則 JavaScript の 実行 バー ジョ ン の 指定 に つい て 

JavaScript に は 、 いく つか の バー ジョ ン が あり ます 。 Firefox で は 、「script」 要素 の [type」 
属性 で 明示 的 に バー ジョ ン を 指定 する こと が で きま す 。 た と えば 、 次 の よう に する と JavaScript 
の バー ジョ ン 1.7 を 使用 する こと を 指定 で きま す 。 


ここ 





<SCrtDt type="text/]QvaScr1tpt:verston=1 .7"> 


「1.7」 の 部 分 が バー ジョ ン に な る の で 、 他 の バー ジョ ン を 指定 する 場合 は 、 この 値 を 変え れ 
ば よい こと に な り ま す 。 TavaScript の バー ジョ ン 指 定 は Firefox の み 対 応 し て いる た め 、 他 の ブ 
ラウ ザ で は 利用 で きま せん 。 


きけ telePel こ IN2 訓 ココ ヨ 」 コ マロ ロ 


本 


昌 strict モ ー ド に つい て 

IE6-9 を 除く プラ ウザ で は 、 JavaScript の 実行 モー ド を 指定 する こと が で きま す 。 これ は 
strict モ ー ド と 呼ば れ 、 JavaScript の 曖昧 さき を 回 避 で きる た め 、 プロ グラ ム 作 成 上 の ミス を 減ら 
すこ と が で きま す 。 strict モ ー ド を 使用 する に は 、[「"use strict:」 と だ け 記 述 し ます 。 関数 内 だ 


が 1 
と も 1! 


品 
W け 、 strict モ ー ド を 有効 に する こと も で きま す 。「 "use strict:」 を 記述 する と 、 次 の よう な 制限 
1 や 違い が 発生 し ます 。 
8 * var な し で グロ ー バ ル 変 数 に 代入 する と エラ ー 
| 8 進数 表記 の 禁止 
s 「with」 の 使用 不可 


earguments.callee」 の 使用 不可 

w「eval()」 ス コー プ 範 囲 の 違い 

sw「NaN」 な ど に 代入 する と エラ ー 

w Teval)」、「arguments」 の 名 前 に 対し て バイ ンド や 代入 不可 

e 関数 で の 「arguments」 は エイ リア ス に な ら ず に 当初 の 引数 を 保持 

* 関数 内 で の 「this」 の 扱い の 変更 (指定 され た 「this」 を 変更 し な い ) 

e 書き 込み 不可 の プロ パテ ィ に 代入 する と エラ ー 

\ 拡張 不可 の オブ ジェ クト へ の 新規 プロ パテ ィ 作 成 で エラ ー 

s 削除 で き な い プロ パテ ィ を 削除 する と エラ ー 

W 重複 する オブ ジェ クト リテラ ル が ある と エラ ー 

e 関数 / メ ソ ッ ド の バ パラ メー ター 名 が 重複 する と エラ ー 

\ 関数 内 で 「 関 数 名 .caller」 「 関 数 名 .arguments」 指 定 は エラ ー 

wlimplements」「interface」「let」 「package」「private」「protected」「public」「static」 
[yield」 の 単語 は 予約 語 の た め 使 用 不可 
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な お 、iOS 5、 Android で も strict モ ー ド に 対応 し て いま す 。 た だ し 、 エラ ー と な っ た 場合 、 
[try.…catch」 文 で 捕捉 で き な い こと が あり ます (次 の サン プル も 動作 結果 が 異な る )。 


則 サン プル で の 動作 の 確認 
実行 バー ジョ ン の 指定 と strict モ ー ド の 指定 に つい て の サン プル は 、 次 の よう に な り ま す 。 各 


ブラ ウザ で index.html を 表示 し て くだ さい 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sample</t1t1e> 
</head> 
<body> 
<OUtDut キ ></OUtDut> 
<SCrtDt type= "text/]qvascrtpt:verston=1 .7"> 
// tet は Firefox で の み 動 作 
tet n = 123.45: 
// n の 内 容 を 出力 
var ele = document.getElementsByTagName( "output")[9] : 
ele.innerHTML = "n の 値 :"+n+"<br>": 
</SCP1Dt> 
<SCPr1Dt tyDpe= "text/]qVaSCr1Dt"> 
// "usSe Str1ct"・ 
var ele = document.getEtementsByTagName( "output")[9] : 
// ここ は strtct モ ー ド で は な く 通 常 動作 。 グ ロー バル 変数 に 代入 可能 
geXDPeSS = 999: 
ele.1tnnerHTML += "gexpress の 値 : "+gexpress+"<br>": 
// 以下 の 関数 は strict モ ー ド 
functton execTest()† 
// strict モ ー ド に 設定 
"USe Str1ct": 
tryt 
// strict モ ー ド で は var な し グロ ー バ ル 変 数 代入 は エラ ー 
arcadtq = 5: 
ele.innerHTML += "arcadiqa の 値 :"+arcgdtg+"<br>": 
+catch(Ce)+{ 
ele.innerHTML += "arcagdia に 代入 で きま せん <br>": 
} 
} 
execTest( ): 
</sCrtDt> 
</body> 
</html> 
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Firefox で は TavaScript の バー ジョ ン を 指定 し て 処理 する こと が で きる た め 、 変数 |n」 の 値 
が 表示 され て いま す 。 


ok 


n の 
gexpress の 1 値 :999 
arcadia に 代入 で きま せん 





Firefox、 Safari、 Opera、 IE10、Google Chrome で は strict モ ー ド に 対応 し て いる た め 、 
var な し で グロ ー バ ル 変 数 に 代 人 する と エラ ー に な り ま す 。 


gexpress の 1 値 :999 
arcadia に 代入 で きま せん 





IE9 で は strict モ ー ド に 対応 し て いな いた め 、 グロ ー バ ル 変 数 に 代入 し た 結果 が 表示 され 
ます 。 


gexpress の ) 自 : 999 
arcadia の ) 値 : $ 
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コメ ント に つい て 





唱 JavaScript の コメ ント 
JavaScript の コメ ント (注釈 ) は 、 2 種類 が 用 意 さ れん て いま す 。 1 つ は 1 行 コ メン ト で ある 「//]」 


で す 。 これ は 、「//」 よ り 後ろ に 続く 文字 か ら 行 末 ( 改 行 コ ー ド ) ま で を コメ ント と する も の で す 。 も 





う 1 つ が 複数 行 を コメ ント と する | /*ー※/」] で す 。「/*」 と 「*※/] で 囲ま れ た 部 分 は すべ て コメ 
ント と みな され 、 処理 され ませ ん 。 Be 
j 

var ai // これ 以降 は 行末 (改行 コー ド ) ま で を コメ ント と する 馬 


var b: /* この 部 分 は コメ ント と な る */ 


人 
この コメ ント で は 、 複数 行 の コメ ント を 
記述 する こと が で きる 


財 活 装 脂 (rr 器 斉 漏 踊 ③1dJOSBAB「 ETEKZFm 


eal| mgll <zg sgll sg 


キバ 


た と えば 、 次 の コー ド で は 最初 の アラ ー ト ダイ アロ グ は コメ ント に な っ て いな い の で 表示 され ま 
す が 、 その 次 の 行 に ある [alert() 」 メ ソ ッ ド は コメ ント に な っ て いる の で 表示 され ませ ん 。 また 、 
ペー ジ 内 に OK の 文字 が 表示 され ます が 、 以後 に 続く 処理 は コメ ント に な っ て いる の で 処理 さ 
れ ま せん 。 


HTML の コー ド (index.html) ー 


| 
<!DOCTYPE html> | 
<html> 「 っ 
<head> IN 
<meta charset="utf-8"> ーー 
<tttte>Sqmplte</t1tle> | 回 
<SCrtpt src="]S/sample . ]S "></SCr1Dt> し ーーー 
</head> ト 
<body> に 
<OutDu キ ></OutDut> 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("togd" 。 functton(){ 
alert(" JavaScrtpt"): 
// glert("OK"): 
document .getElementsByTagName( "output")[ の 9] .1nnerHTML = "OK": 
/* 
document .getElementsByTagNagme( "output")[9] .1nnerHTML = "NG"・ K4 


ロロ 


mi5ECTIHN- 口 ロ ら 6 mw コメ ント に つい て 


qtert( "NG!"): 
を / 
}, fatse): 


ブラ ウザ で index.html を 表示 する と 、 次 の よう に 表示 され ます 。 


ーー* 
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ら ビ 5 に 11EJN-LILI/ 
変数 と 定数 に つい て 


則 JavaScript で の 変数 の 定義 

JavaScript で の 変数 官 言 に は 、 いく つか の 方 法 が あり ます 。 TavaScript で は 、「var」 や 
| const」 を 使わ ず に 、 いき な り 変数 を 使用 する こと が で きま す 。「var」 宣言 し な い 場合 、 変 
数 は グロ ー バ ル 変 数 と し て 定義 され ます 。 また 、 関 数 外 で は |「var」 宣 言 し て る し な く て も 、 グ ロー 
バル 変数 と し て 定義 され ます 。 グロ ー バ ル 変 数 で は な く 、 ロー カル 変数 と し て 宣言 する 場合 に 
は 、 関数 プロ ッ ク 内 で | var」 を 使っ て 宣言 し ます 。 ブロ ッ ク 内 で の み 有 効 な 変数 に し た いり 場合 
に は 「let」 が あり ます が 、 こ れ は Firefox で し か 使用 する こと が で きま せん 。 

変数 を まとめ て 宣言 する 場合 は 、|,」( カ ンマ) で 区 切っ て 1 行 で 記述 し ます 。 また 、 変数 の 
宣言 と 同時 に 初期 値 代 信人 す る こと も で きま す 。 これ を 変数 の 初期 化し いい ます 。 





// 変数 「appte」 を 宣言 する 


Var opDDLe: 


味 対 斗 此 (T 器 主 九 上 中 31dJOSBgABe「 ET 店 


// 変数 「banang」「cherry」 を まとめ て 宣言 する 


var banana, cherry: 


// 宣言 と 同時 に 初期 値 を 指定 する 
Var QpDle = 123: 


// 複数 の 変数 に それ ぞ れ 初期 値 を 指定 し て まとめ て 宣言 する 


var banana = 456,。 cherry = 789: 


// vgr 宣 言 な し で 変数 foronge」 を 定義 むす る (グロ ー バ ル 変 数 と し て 定義 され る ) 


orange = "OK": 


// プロ ッ ク 内 で の み 有 効 な 変数 を 定義 むる CFirefox の み ) 
tet n ="NG": 


p 変数 名 の 制限 
変数 名 に つい て は 、 次 の 制限 が あり ます 。 
s 最初 が 英文 字 、 また は 、「_」( ア ンダ ー バ ー) で 始ま る 
e 文字 目 以 降 は 、 英 数 字 と 「_」( ア ンダ ー バ ー) を 使用 する こと が で きる 
e 大 文字 と 小文字 は 区 別 さ れる ( 例 : |abc] と 「Abc」 は 別 の 変数 と みな され る ) 
e 予約 語 を 変数 名 に する こと は で き な い 


// 次 の 変数 は 有効 

var obc // 英字 で 始ま る 
var _qbc //「_」 か ら 始 まる 
var abc_123: 
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// 変数 「abc」 と 変数 「Abc」 は 区 別 さ れる 1 
Var qabC: 


Var AbC: 


// 次 の 変数 は 無効 
var 123: // 数 字 で 始ま る 
var var: // 予約 語 


p 代入 

変数 へ の 値 の 代入 は 、| =」 演 算 子 を 使い ます 。 また 、|「a = b = c = 123.」 の よう に 一 括 し 
て 同じ 内 容 を 代入 する こと も で きま す 。 

q = 123: // 変数 fa」 に 「123」 を 代入 する 


qa = b: // 変数 「a」 に 変数 「5」 の 値 を 代入 する 
q=b=c= 123: // 変数 「g」「b」「c」 に 「123」 を 代入 する 


p 変数 で 扱え る デー タ 

JavaScript の 変数 は 非常 に 柔軟 な 仕様 に な っ て お り 、 ど ん な デー タ ( 数 値 や 文字 列 、 関 数 、 
オブ ジェ クト 、 メソ ッ ド 、 プロ パテ ィ ) で も 入れ る こと が で きま す 。 つま り 、 変数 の 型 を 問い ませ ん 。 
た と えば 、「a = 12.3] と 変数 「a」 に 数 値 の 「12.3」 を 入れ た 後 で 、「a = "OK"」 と し て も 問題 あ 
り ま せん 。 た だ し 、 変数 の 型 を 問わ な い の は 非常 に 便利 な 反面 、 型 の 不一致 に に る エラ ー や 
思わ ぬ 結 果 を 引き 起こ すこ と が あり ます 。 これ を 防ぐ に は 、 変数 の 型 を 調べ て か ら 処 理 す る の 
が 安全 で す 。 変数 の 型 を 調べ る 方 法 に つい て は 、 112 ペ ー ジ を 参照 し て くだ さい 。 

p 注意 点 

変数 に 数 値 や 文字 列 を 代入 し た 場合 は その も の が 変数 に な り ま す が 、 オブ ジェ クト な どの 
場合 は 注意 が 必要 で す 。 変数 に オプ ジェ クト を 代入 する と 、 オブ ジェ クト その も の が コピ ビー され 
る の で は な く 、 オブ ジェ クト へ の 参照 が 代入 され ます 。 

だ た と えば 、 次 の コー ド で は 、 変数 | a」 に ペー ジ 全 体 の スタ イル シー ト オ ブ ジェ クト へ の 参照 を 
代入 し て いま す 。 その 後 、 変 数 「b」 に 変数 「a] を 代入 し て いま す が 、 ペ ー ジ 全体 の スタ イル シー 
ト オ ブ ジェ クト が 複製 され て 変数 「b] に 代入 され て いる わけ で は あり ませ ん 。 単純 に オブ ジェ ク 
ト へ の 参照 だ けが 変数 「b] に 代入 きれ ます 。 この た め 、 コー ド を 実行 する と 、 ペー ジ 全 体 の 背 
景色 が 赤 に な り ま す 。「b = a」 は 「b = document.body.style」 と 等 価 に な る と いう こと で す 。 


q = document . body . style: 
D = ds: 


b.backgroundColor = "red": 


また 、 ブラ ウザ に 実装 され て いる JavaScript で は 、 単純 に 変数 を 作成 する と 、| window」 オ 
プ ブ ジ ェクト の プロ パテ ィ と し て 追加 され ます 。 つま り 、 グ ロー バル 変数 と いう 名 出 に なっ て いま す が 、 
実際 に は 「 window」 オ ブ プ ジ ェ クト の プロ パテ ィ と し て 割り 当て られ て いま す 。 これ は 、[「for..in] 文 
で 「window」 オ プ ジ ェ クト の 中 身 を 確認 する と わか り ま す 。 この た め 、|「 window」 オ ブ ジ ェクト の 
プロ パテ ィ と 変数 名 が 重複 し て し まう と 、 正常 に 動作 し な く な る の で 注意 し て くだ さい 。 
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次 の コー ド を 実行 する と 、 変 数 | a]」 の 内 容 も 「window」 オ プ ジ ェ クト の プロ パテ ィ | a」 の 内 容 
も 同じ 文字 が 表示 され ます 。 


ロ 時 
// 変数 「a」 の 内 容 を 表示 する 
qlLert(qa): 


//「wtndow」 オ プ ジ ェ クト の プロ パテ ィ 「c」 の 内 容 を 表示 する 


altert(wtndow .q): 


ぁ 変数 の 削除 
変数 を 削除 する に は 、「delete」 演 算 子 を 使い ます (117 ペ ー ジ 参照 )。 た だ し 、「var」 宣言 
し た 変数 を 削除 する こと は で きま せん 。 


唱 JavaScript で の 定数 の 定義 

「var」 を 使っ て 宣言 し た 変数 の 内 容 は 、 自由 に 変更 で きま す 。 内 容 を 変更 し て ほし く な い 場 
合 に は 「var」 で な く 、「const」 を 使い ます 。「const」 を 使っ て 宣言 する 場合 に は 、 定数 名 ( 変 
数 名 ) と 同時 に 値 も 設定 する 必要 が あり ます 。 定数 名 の 制限 な ど は 、 変数 と 同様 で す 。 な お 、 
「 const」 は IE9(Windows Phone 含 む ) で は 動作 し ませ ん 。 


// const で 定数 と し て 宣言 
const qandrotd = 1: 
// const で 宣言 し た 変数 は 変更 が で き な い の で エラ ー 


androtd = androtd + 1: 


miml 画 IN 較 COnSt で の 不具 合 


Opera で は [| const」 宣言 は で きま す が 、 変数 の 内 容 を 変更 する こと が で き て し まい ます 。 
同名 の 変数 を | try..catch」 文 内 で 「const」 宣言 し 、「 catch」 ブ ロッ ク 内 で [| var」 宣言 
し た 場合 、Firefox/Google Chrome で は エラ ー に な り ま す が 、Safari/Opera で は エラ ー 
に な り ま せん 。 














tryt 
Const mac = "SE/39": 
glert("const を 使用 し まし た "): 

+catch(e){ 
gtert("const は 使え な い の で var で 代用 し ます "): 


var mac = "SE/39": 





} 
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繰り 返し 処理 (ルー プ ) に つい て 


唱 JavaScript で の 繰り 返し 処理 の 種類 
JavaScript に は 繰り 返し 処理 を 行う 命令 と し て 、[for」 文 、| while」 文 、「do..while 」 文 が 用 


意 さ れ て いま す 。 


L 唱 
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則 「for」 文 を 使っ た 繰り 返し 処理 
| for」 文 は 、 一 定 の 回 数 、 処理 を 繰り 返し ます 。「for」 文 の 構文 は 、 次 の よう に な り ま す 。 


for (初期 値 : 繰り 返し 条件 : 増減 値 ){ 
繰り 返す 処理 
} 


だ と えば 、| 0」 か ら 「9] ま で の 合計 を 求め る に は 、 次 の よう に 記述 し ます 。 


n = の : 
for (1= の : 1<19: ュ ++){ 
n = n +1 


} 


初期 値 ・ 繰 り 返 し 条件 ・ 増 減 値 は 「,] (カン マ ) で 区 切っ て 複数 、 指定 する こと が で きま す 。 
た と えば 、 次 の よう に 記述 する こと が で きま す 。 


n = の : 

WM = の : 

for (1=9,]j=1: 1<19, <5: i++。 j++){ 
n=n ロ 二 1: 
= 十 ]: 


} 


この 場合 、|j] の 値 が 15] 以 上 に な っ た ら 終了 する の で 、 変 数 「n] は 「6」、 変 数 「m] は 「10] 


と な り ま す 。 
増減 値 を 指定 する 場合 、 ポス トイ ンク リ メ ン ト (G++) より も プリ イン クリ メン ト (++i) の 方 が 処理 
が 速い 場合 も あり ます 。 


また 、 繰り 返し を 途中 で 抜け る 場合 に は 、| break」 文 を 使い ます 。 繰り 返し の 先頭 に 戻る 場 
合 に は 、「continue」 文 を 使い ます 。 


p 初期 値 ・ 繰り 返し 条件 ・ 増減 値 の 省略 
初期 値 ・ 繰 り 返 し 条件 ・ 増 減 値 の すべ て を 省略 する こと が 可能 で す 。 すべ て 省略 する 場 
合 は 、 次 の よう に 記述 し ます 。 


for (ji) 
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た だ し 、 これ は 無限 に 繰り 返す こと に な り 、 Web Workers 上 で 動作 きせ る 場合 以外 で は 、 
ブラ ウザ が 停止 状態 に な っ て し まう こと が あり ます 。 この よう な 場合 に は 、 次 の よう に | break」 
文 を 使っ て 繰り 返し 処理 か ら 抜け 出す こと が で きま す (直近 の 繰り 返し 処理 か ら 抜 ける ) 。 


n = の : 
for (jj)1 

ロ ++: 

tf Cn > 19) breok: 
} 


p サン プル で の 確認 
次 の コー ド で は 、「0」 か ら 「9」 ま で の 文字 と 、「10] か ら 「 1」 ま で の 文字 が 表示 され ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sqmple</t1tle> 
<SCrtpt src="]Ss/sample.]S"></SCr1Dt> 
</head> 
<body> 
<D> <OUtDut></OUtDut></D> 
<D><OUtDut></OutDut></D> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventListener("toad" 。 functton(){ 
// 文字 入れ る 変数 を 用 意 
var total = ""・ 
// 19 回 繰り 返す 
forCvar 1= の : 1<19: 1++){ 
totat = total + (new StrtngC1) +"。 
} 
// 結果 を 出力 
document .getElementsByTaqgName( "output")[9] .1nnerHTML = total: 
// 文字 入れ る 変数 を 初期 化 
total = "": 
// 1 回 繰り 返す 
forCvar 1=19: t> の 9: 1--){ 
totat = totagl + (new Strtng(1) + "。 "5: 
} 
// 結果 を 出力 
document . getE1ementsByTagName( "output") う [1] .1nnerHTML = total: 
+,。 false): 
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プラ ウザ で index.html を 表示 する と 、 次 の よう に 表示 され ます 。 


0.1.2. 3.4.5.6.7.8.9. 


1 10.9.8.7.6, 5. 4. 3.2. 1. 





唱 [while」 文 、「do...while」 文 を 使っ た 繰り 返し 処理 
条件 を 満た し て いる 間 、 繰り 返し 処理 を 行う に は 、「while」 文 、 ま た は 、「do..while | 文 を 使 


いま す 。 構文 は それ ぞ れ 、 次 の よう に な り ま す 。 


white (条件 式 ){ 
繰り 返す 処理 
} 


do{ 
繰り 返す 処理 
} white (条件 式 ): 


| while」 文 は 繰り 返し 前 に 条件 を 調べ る た め 、 条件 に よっ て は 一 度 も 処理 が 行わ れ な い 場 
合 が あり ます 。| do..while」 文 の 場合 は 最後 に 条件 を 調べ る た め 、 最低 1 回 は 繰り 返し 処理 
が 行わ れ ま す 。 また 、| while」 文 、| do..while」 文 と も 、「break」 文 を 使っ て 繰り 返し か ら 抜け る 
こと が で きま す 。 


p サン プル で の 動作 確認 
挫 の コー ド で は 、 最初 の ルー プ で は 10 回 繰り 返さ れ ま す 。 2 回 目 の ル ー プ は 条件 を 満た し て 
いな い 場 合 で も 最低 1 回 は 実行 され る た め 、「100」 の 数 値 が 表示 され ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttle>SampLe</t1t1e> 
<SCr1Dt Src="]S/Sample .]S "></scrtDpt> 
</head> 
<body> 
<D> <OU て DuUt キ ></OUtDut キ ></D> 
<D> <OU モ Du キ ></OutDu キ ></D> 
| 
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</body> 4 


</html> 


JavaScript の コー ド (sample.jS) 
wtndow.addEventListener("toad"。 functton()1 
// 文字 を 入れ る 変数 を 用 意 
var totqgl = "": 
// 19 回 繰り 返す 
var Count = の : 
whtte(count <19){ 





tota1l = totgl + (new StrtngCcount)) + "。 "5: 

COUnt++: 
} 
// 結果 を 出力 
document.getEtementsByTagName( "output")[9] .1nnerHTML = total: 
// 文字 を 入れ る 変数 を 用 意 
totgl = "> 
// 繰り 返す 。 do. . .whitle は 条件 判断 が 最後 な の で 最低 1 回 は 実行 され る 
Count = 190: 
dof 

tota1 = total + (new Strtng(count も )) + "。 の 5 
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COUnt++: 
+whtleCcount <19) 
// 結果 を 出力 
document .getEltementsByTagName( "output")[1] .tnnerHTML = totgal: 
+。 false): 


ブラ ウザ で index.html を 表示 する と 、 次 の よう に 表示 され ます 。 


0. 1.2. 3. 4. 5. 6. 7. 8. 9. 


| 100. 





mml 間 軸 N 開 DOM を 繰り 返し 操作 する 場合 


DOM の ノー ド を 繰り 返し 操作 する 場合 は 注意 が 必要 で す 。DOM の ノー ド を 削除 する 
よう な 場合 に は 、 動 的 に ノー ド が 変化 し ます 。 この と き 、 DOM ノ ー ド の 先頭 か ら 処理 する 
と うま くい か な い 場 合 が あり ます 。 この よう な 場合 に は DOM ノ ー ド の 末尾 か ら 処 理 す る よ 
うに し ます 。 
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柔 件 分 岐 に つい て 


則 条件 に 応じ て 処理 を 分 ける に は 
JavaScript で 条件 に 応じ て 処理 を 分 ける に は 、[ 下 | 文 、「switch | 文 、 三 項 演算 子 を 使い 


ます 。 





昌 [if」 文 

直文 は 、 条件 を 満た し た 場合 に 、 以後 に 続く 処理 を 行い ます 。 条件 を 満た し て いな い 場 
合 の 処理 も 同時 に 記述 する に は 、「else」 節 を 使い ます 。 複数 の 条件 で 分 岐 き せ た り 、 プロ ッ ク 
内 で きら に 「 正 ] を 記述 する こと も で きま す が 、 あま り 条 件 判断 が 複雑 に な る よう で あれ ば 、 関数 
や メソ ッ ド な ど で ま と め る な どの 工夫 が 必要 に な り ま す 。 [正文 の 構文 は 、 次 の よう に な り ま す 。 


if (条件 ) { 
条件 を 満た し た 場合 の 処理 
} 


// 条件 を 満た し て いな い 場 合 の 処理 も 記述 する 
if (条件 ) 
条件 を 満た し た 場合 の 処理 
} else { 
条件 を 満た さなか っ た 場合 の 処理 
} 


// 複数 の 条件 で 分 岐 さ せる 
if (条件 1) { 
条件 1 を 満た し た 場合 の 処理 
} else tf (条件 2){ 
条件 2 を 満た し た 場合 の 処理 
} else { 
条件 1、 条件 2 の どちら も 満た さなか っ た 場合 の 処理 
} 


な お 、| 下 ] に 続く 処理 が 1 行 の と き は 、「 上 『」 を 省略 し て 記述 する こと が で きま す 。 


if (条件 ) 条件 を 満た し た 場合 の 処理 


則 「switch」 文 
[if 文 は Yes/No の 判断 に は 向い て いま す が 、 複数 の 条件 を まとめ て 処理 する 場合 に は 、 


| switch」 文 を 使い ます 。「case」 節 に 一 致す る 値 や 文字 列 を 指定 し 、「:」| (コロ ン ) で 区 切っ 
て 直後 に 処理 する 命令 を 記述 し ます 。 こ こ で 処理 を 終わ ら せ る 場合 に は 、「break | 文 を 使っ て 
| switch」 か ら 抜 け ま す 。「break」 文 を 記述 し な いと 、 次 の 「case」 節 の 処理 も 実行 きれ る の 


生 己 ロ TI 品 NN! - 口 ロワ mw 条件 分 岐 に つい て 


で 注意 し て くだ さい 。 
「case」 節 で 指定 し た 以外 の 値 で も 処理 を 行い た い 場 合 に は 、| default」 節 を 使い ます 。 
[default」 節 は 、 省略 する こと が で きま す 。 


switch( 調 べ る 対象 1 
case 値 1 : 調べ る 対象 と 値 1 が 一 致し た 場合 の 処理 
break: 
case 値 2 : 調べ る 対象 と 値 2 が 一 致し た 場合 の 処理 
breoak: 
default : cqse で 指定 し た 以外 の 値 の 場合 の 処理 
} 


旧 三 項 演算 子 
条件 が あま り 複 雑 で は な く 、 Yes/No だ け の 判別 が で きる 場合 に は 、 三 項 演算 子 を 使う 方 
法 も あり ます 。 三 項 演算 子 に つい て は 、 43 ペ ー ジ も 参照 し て くだ さい 。 


条件 式 ? 条件 を 満た し た 場合 の 処理 : 条件 を 満た さなか っ た 場合 の 処理 


日 サン プル で の 動作 確認 
次 の コー ド で は 、 ダ イア ログ で 数 値 を 入力 し 、 入 力 値 さ れ た 値 に よっ て 処理 を 分 岐 し て いま す 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<title>Sqmple</tttle> 
<Scrtpt src="]S/sample.]S "></scrtDpt> 
</head> 
<body> 
<D> <OUtDut></OutDut></D> 
<D> <OuUtDut></OutDUt></D> 
<D> <OU モ Dut></OutDut キ ></D> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow.addEventLitstener("toad"。 functton()# 
var ele = document.getEtementsByTagName( "output"): 
// ダイ アロ グ で 数 値 を 入力 
var num = prompt(" の 9 まで の 数 値 を 入れ て 下さ い ", 1) | 9@: 
// 9 か どう か 調べ る 
tf (num === 9){ 
ete[9] .innerHTML = "入力 され た 値 は ゼロ で す ": 


+elset K4 
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ele[9] .1nnerHTML = "入力 され た 値 は ゼロ 以外 で す ": 4 
} 
// 入力 され た 数 値 に 応じ て 処理 を 分 ける 
Sw1tch(num )† 
case の : ele[1].innerHTML = "入力 値 は 9 で す ": 
break : 
case 1 : ele[1].innerHTML = "入力 値 は 1 で す ": 
break: 
case 2 : ele[1] .innerHTML = "入力 値 は 2 で す ": 
break: 
case 3 : ele[1].innerHTML = "入力 値 は 3 で す ": 
break: 
default : ele[1].innerHTML = "入力 値 は 9 て 3 以外 で す ": 


} 

// 三 項 演算 子 を 使っ て 処理 を 分 ける 

ete[2] .tnnerHTML = Cnum === の) ? "入力 値 は 9 で す 。" : "入力 値 は 9 以外 で す 。 " 
}。 fgqtse): 


ブラ ウザ で index.html を 表示 する と 、 ダイ アロ グ が 表示 され ます 。 ダイ アロ グ に 「0」 を 入力 し 
て |OK」 ボ タン を クリ ッ ク す る と 、 次 の よう に 表示 され ます 。 


ス の フト ブロ ン ブ ト : 
0…9 ま で の 数 値 を 入れ て 下さ い 


入力 され た 値 は ゼロ で す 
入力 値 は 0 で す 
入力 値 は 0 で す 。 





|0」 以 外 の 数 値 を 入力 する と 、 次 の よう に 表示 され ます 。 


還 王 ピ TI ロ N- 口 ロ 9 m 条件 分 岐 に つい て 


入力 され た 値 は ゼロ 以外 で す 
入力 値 は 0<3 以 外 で す 
入力 値 は 0 以外 で す 。 





miml 画 8IN 細 耳 P 外 // ハ リッ シュ を 利用 する 


サン プル の よう に 条件 に 応じ て 文字 を 表示 し た り 、 特定 の 関数 や メソ ノッ ド を 呼び 出し た 
りす る の で あれ ば 、 配列 / ハ ッシュ を 利用 する こと も で きま す 。 次 の 例 で は 入力 され た 数 
値 に 応じ て 配列 に メッ セー ジ を 入れ て お き 、 入力 値 を 配列 の 添え 字 に する こと で メッ セー 
ジ を 表示 し て いま す 。 な お 、 配列 に メッ セー ジ が 入っ て いな い 男 囲 の 場合 は 、 次 の よう に 
「 || 」 を 使っ て 、 別途 、 メッ セー ジ を 表示 する こと が で きま す 。 














var ele = document .getElementsByTagName( "output"): 
// ダイ アロ グ で 数 値 を 入力 

var num = prompt("9 の 9 まで の 数 値 を 入れ て くだ さい ", 1) | 9: 
// 配列 に 表示 文字 を 代入 

var msg = ["9 の 9 です", "1 で す "]: 

// 9 か どう か 調べ る 

ele[9] .tnnerHTML = msg[num] 1 "9 と 1 以外 で す ": 
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関数 の 定義 


中 関数 を 定義 する 
JavaScript で 関数 を 定義 する に は 、 いく つか の 方 法 が あり ます 。 通常 の 関数 定義 は 、 次 の 
よう に な り ま す 。 





function 名 前 て (パラメータ){ 
処理 
} 


パラ メー タ は 「,] (カン マ ) で 区 切っ て いく つ で も 記述 する こと が で きま す 。 渡す パラ メー タ の 
種類 に 制限 は あり ませ ん 。 

JavaScript で は 変数 に 関数 を 代入 する こと が で きる た め 、 次 の よう に 定義 むす る こと も で きま 
す 。 た だ し 、 通常 の 関数 定義 で は 処理 が 実行 され る 前 に 関数 定義 が 行わ れる の で 、 プロ グ 
ラム 中 の どこ で も 関数 を 呼び 出す こと が で きま す が 、 変数 に 代入 する 場合 は 代入 後 で な いと 
関数 を 呼び 出し て 使用 する こと は で きま せん 。 


var 名 前 = functtionC( パ ラメ ー タ ){ 処理 + 


イベ ント ハン ドラ や メソ ッ ド 、 お よび 、 一 時 的 に 処理 を 呼び 出し て 使用 する 場合 に は 、 次 の よ 
うに 名 前 の な い 関 数 (無名 関数 / 匿 名 関数 ) を 使う こと も で きま す 。 


functton( パ パラメータ){ 
処理 
+ 


また 、 次 の よう に し て 定義 し た 関数 を 即時 実行 さす る こと も で きま す ( 即 時 関数 ) 。 


(function( パ パラメータ){ 
処理 
})( て パラメータ) 


| function」 文 で 定義 する 以外 に も 、「new Function () 」 を 使っ て 行う こと も で きま す 。「new 
Function()) 」 で は 、 パラ メー タ ゃ 処理 内 容 も 文字 列 で 指定 し ます 。 複数 の パラ メー タ を 指定 す 
る こと が で きま す が 、 パ ラメ ー タ の 最後 が 実際 に 処理 する 内 容 に な り ま す 。「new Function() 」 
は 処理 速度 が 遅い た め 、 あま り 使わ れ ま せん 。 


var 名 前 = new FunctionC( パ ラメ ー タ ,.…., 処理 ) 


関数 内 で きら に 関数 を 定義 する こと も で きま す 。 この 場合 、 関数 外 か ら は 関数 内 に 定義 き 
れ た 関数 を 呼び 出す こと は で きま せん 。 


還 王 ロ 本 | 口 山 - 口 1 口 m 関数 の 定義 


唱 サン プル で の 動作 確認 
次 の コー ド で は 、 定義 し た 2 つの 関数 が 呼び 出さ れ 、 処理 が 行わ れ ま す 。 処理 が 行わ れる 
と 、 画面 に 文字 が 出力 され ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 


<head> 





<metq charset="utf-8"> 
<ti 寺 le>SampLe</t1tle> 
<SCPtpt src="]S/sqmple .]S "></SCrtDt> 
</head> 
<body> 
<D> <OUtDu キ ></ OutDut></D> 
<D><OUtDu キ ></OutDut></D> 
<D> <OUtDu キ ></OutDut></D> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .qddEventLtstener("1oagd", functton()† 
// 関数 xyz を 定義 
functton xyz()+ 


財 汎 状 障 「T 器 治 洗 脂 G1dJOGBAB「 記 に FTA ミド 


document.getEtementsByTagName( "output")[1] .1nnerHTML = "xyz": 
} 
outputText("Sampte"): // 関数 outputText を 呼び 出す 
xyz(): // 関数 xyz を 呼び 出す 
var n = qdd(299, 15): // 関数 add を 呼び 出す 
document . getEtementsByTagName( "output")[Z] .tnnerHTML = "結果 :"+n: 
+,。 false): 
// 関数 outputText を 定義 
function outputText(text)+ 
document.getEtementsByTagName( "output")[9] .1nnerHTML = text: 
} 
// 関数 add を 定義 


var gdd = new Functton("a"。 "b"。 "return o+b" ): 


ブラ ウザ で index.html を 表示 する と 、 次 の よう に 表示 され ます 。 





関連 項目 


e 関数 の パラ メー タ の 読み 出し に つい て ドド oe p.64 
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関数 の バラ メー タ の 読み 出し に つい て 








則 関数 の パラ メー タ を 読み 出す 方 法 

JavaScript の 関数 に 渡す パラ メー タ の 数 は 固定 され て お ら ず 、 自由 な 数 だ け 指 定 す る こと 
が で きま す 。 渡す パラ メー タ の 種類 に も 制限 が あり ませ ん 。 関数 側 で は 、 渡さ れ た パラ メー タ は 
| arguments」 配 列 を 使っ て 参照 する こと が で きま す 。「argumentsJength | が 渡さ れ た パ 
ラメ ー タ の 総数 に な り ま す 。 最初 に 渡さ これ た パラ メー タ は 、「arguments[0]」 で 参照 する こと が 
で きま す 。 


則 サン プル で の 動作 の 確認 
炊 の コー ド で は 、 関数 に 渡さ れ た 数 値 を 合計 し た 結果 が 表示 され ます 。 関数 を 2 回 、 呼び 
出し て いる の で 、 2 つの 計算 結果 が 表示 され ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 


<tttle>Sqmple</t1t1le> 





<SCrtpt src="]S/sqmple .]S"></scrtpt> 
</hegd> 
<body> 
<DP><OUtDu キ ></OutDut></D> 
<D> <OUtDu キ ></OUtDut キ ></D> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 
wtndow.qddEventLtstener("1oad" 。 functton(){ 
// 関数 catc を 呼び 出し 
var n = Cglc(Z299, 15): 
document .getEtementsByTagName("output")[9] .1nnerHTML = "合計 :"+n: 
// パラ メー タ の 数 を 変更 し て 呼び 出し 
n = Calc(1.2.3.4.5.6,7,8.9,19): 
document.getEtementsByTagName( "output")[1] .1nnerHTML = "合計 :"+n: 
}, faqlse): 
// パラ メー タ の 数 だ け 処 理 ず る 
functton calc(){ 
var total = の : 
for(var 1=9: 1<aqrguments.Length: 1++){ 
var n = qrguments[1] : 


total = totgl + n: 


還 王 ビビ ピロ 丁 | 口 - 口 1 1 m 関数 の パラ メー タ の 読み 出し に つい て 


] 二 


return totoal : 


プラ ウザ で index.html を 表示 する と 、 次 の よう に 表示 され ます 。 





合計 :215 


合 軒 :35 
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る 関数 の 定義 か 0: まあ) が: が 電 天 D.6 ど 
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| thisS] キー ワー ド の 固定 に つい て 





LL 
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則 [thiS」 キー ワー ド を 固定 する 方 法 

JavaScript で は | this] キー ワー ド は 固定 きれ て お ら ず 、 状況 に よっ て 何 を 示す か が 変わ り 
ます 。 この | this] キー ワー ド を 決め る (バイ ンド ) す る に は 、「bind() 」 メ ソ ッ ド を 使い ます 。「bind 
() 」 メ ソ ッ ド の パラ メー タ に 、| this] キ ー ワ ー ド で アク セス し た い オ プ ジ ェ クト を 指定 し ます 。 





則 サン プル で の 動作 確認 
次 の コー ド で は 、 関数 内 で | this」 の 内 容 に 応じ て 加算 が 行わ れ 、 そ の 結果 が 表示 され ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttle>Sqmplte</tttle> 
<SCrtDt Src="]S/sampte.]S"></scrtpt> 
</head> 
<body> 
<D> <OUt て Du キモ ></OUtDut></D> 
< く D> <OUtDu キ ></OutDut></D> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oad", functton(){ 
// this に バイ ンド ( 紐 付け る ) 配 列 そ の 1 
Vqar qry1 = [1。2。 3。4。5]: 
// this に パイ ンド ( 紐 付け る ) 配 列 その 2 
Var qry2 = [19,29,39,49,59,69,79,89,99,199] : 
// 関数 calc に ory1 を バイ ンド 
var myCalc1 = calc.btndCary1): 
var n = myCalc1(): 
document .getEtementsByTagName( "output")[9] .1nnerHTML = "合計 :"+n: 
// 関数 catc に gryz を バイ ンド 
var myCalc2 = calc.btnd(ary2): 
n = myCalcZ(): 
document .getEtementsByTagName( "output")[1] .1nnerHTML = "合計 :"+n: 
}, foalse): 
// 数 値 の 合計 を 計算 。 bind し な い 場 合 は thts は window に な る 
functton caqlc()# 
var total = の : 
for(var 1= の 9: 1<thts.1engthi 1++){ 
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total = totgatl + thts[1] : 4 
} 


return total : 


ブラ ウザ で index.html を 表示 する と 、 次 の よう に 表示 され ます 。 





合計 :13 


合計 :S50 
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例外 処理 に つい て 


唱 JavaScript で の 例外 処理 
JavaScritp で 例外 処理 を 行う に は 、| try..catch」 文 を 使い ます 。 構文 は 、 次 の よう に な り ま 
す 。「 fnally」 ブ ロック に つい て は 、 省略 可能 で す 。 








try{ 
エラ ー が 発生 する 可能 性 が ある 処理 
} catchCe) { 
エラ ー が 発生 し た 場合 の 処理 
} ftnalty { 
エラ ー の 有無 に 関係 な く 実 行 さ れる 処理 
} 


また 、 次 の よう に 、 入れ 子 に し て 使う こと も で きま す 。 


De Reel っ ココ コッ ロロ 


try {1 
エラ ー が 発生 する 可能 性 が ある 処理 1 
try { 
エラ ー が 発生 する 可能 性 が ある 処理 2 
ロ }catch(e){ 
処理 2 で エラ ー が 発生 し た 場合 の 処理 
m 
0 +catchCe){ 
処理 1 で エラ ー が 発生 し た 場合 の 処理 
} 


エラ ー が 発生 する と 、 エラ ー の 原因 を 示す 文字 列 が 「catch」 の パラ メー タ と し て 渡さ れ ま 
す 。 発生 する エラ ー の 種類 は 、 次 の 表 の よう に な り ま す 。 


「eval() 」 実行 時 の エラ ー/ 式 や 文 な ど が 間違っ て いる 場合 な ど 原因 多数 


値 が 範囲 外 / 正 数 また は 整数 の み 指定 する と ころ に 負数 や 小数 値 を 指定 


参照 不能 / 変 数 名 が 間違っ て いる 、 オブ ジェ クト が な い 場 合 な ど に 発生 
文法 エラ ー/ 誤 字 脱 字 等 、 入 力 ミス の 可能 性 あり 


型 が 間違っ て いる / 引 数 の 型 が 違う 、 渡 し た パラ メー タ が 不足 し て 値 が 


[null」 や 「undefined」 な ど に な っ て いる 場合 な ど 


また 、| throw」 文 を 使っ て 故意 に エラ ー を 発生 させ る こと が で きま す 。 この 場合 、[throw」 
文 で 指定 し た 文字 列 な ど が 「catch」 の パラ メー タ と し て 渡さ れ ま す 。 

さら に エラ ー が 発生 する と 、| catch」 に は エラ ー オ ブ ジ ェクト が 渡さ れ ま す 。 エラ ー オ ブ ジ ェ 

クト の | message」 プロ パテ ィ に エラ ー メ ッ セ ー ジ が 入り ます 。 これ は 、 どの ブラ ウザ で も 共通 で 
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す 。 Firefox で は 、 これ に 加え て 「lineNumber 」 プ ロ パ ティ に エラ ー 発 生 行 が 入り ます 。 また 、 
[fleName 」 プ ロ パ ティ に は 、 エラ ー と な っ た ファ イル の URL が 人 り ま す 。 


唱 サン プル で の 動作 確認 
次 の コー ド で は 、 例外 が 発生 する と 、 例外 の 原因 が 表示 され ます 。 2 番目 の エラ ー は 改 意 


に 発生 させ 、 任意 の メッ セー ジ を 表示 し て いま す 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<metq charset="utf-8"> 
<title>Sqmple</t1tle> 
<SCrtpt src="]S/sample .]S"></SCrtDt> 
</hegd> 
<body> 
<OutDut></OutDut><hP> 
<OutDut></OutDut><hP> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window .qddEventLtstener("1ogd" 。 functton()+ 
var ele = document.getEtementsByTagName( "output"): 
// エラ ー が 発生 する 可能 性 が ある 処理 を 行う 
tryt 
// iPqd と いう オブ ジェ クト は 存在 し な い の で エラ ー 
var myDevtce = new 1Pad(): 
+catchCe){ 
ele[9] .innerHTML = "例外 が 発生 :"+e: 
} 
// throw を 使っ て エラ ー を 投げ る 
try{ 
throw "Crash!!"x: 
+catch(e){ 
ele[1] .innerHTML = "例外 が 発生 :"+e: 
} 
}, false): 


ブラ ウザ で index.html を 表示 する と 、 次 の よう に 表示 され ます 。 


例外 が 発生 : ReferenceError- Pad' (は 定義 され て い 
ませ ん 。 


例外 が 発生 :Crashli 








L 
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また 、 エラ ー オ プ ブ ジ ェクト を 生成 する サン プル は 、 次 の よう に な り ま す 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





LL 


敗 装 障 (T 器 正 記 脂 ③10JOSGBAB「 EE4 ミ m 


<head> 
<rmetq charset="utf-8"> 


<t1tle>Sqmple</t1t1e> 





<SCrtDpt Src="]S/sample.]S "></scrtpt> 
</head> 
<body> 
< く Out て Du キモ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oaqd" 。 functton(){ 
var ele = document.getElementsByTagName( "output")[9@] : 
// エラ ー を 発生 させ る 
tryt 
// 入力 ミス に よる エラ ー 
var n = new number(12.3): 
+}catchCe){ 
ele.tnnerHTML = e.message+"<br>": 
ete.tnnerHTML += e.litneNumber+" 行 で エラ ー で す <br>": 
ele.tnnerHTML += e.fileNgme: 
} 
}, faqlse): 


ブラ ウザ で index.html を 表示 する と 、 エラ ー メ ッ セ ー ジ が 表示 され ます 。 Firefox 以 外 で は 
エラ ー 行 と エラ ー フ ァイル 名 は 「undefined 」 に な り ま す 。 


mumber は 定義 され て いま せん ,。 
undefined 行 で エラ ー で す 
undefincd 





Firefox で は エラ ー メ ッ セ ー ジ に 加え て 、 エラ ー 発 生 行 と エラ ー フ ァイル 名 の URL が 表示 さき 
れ ま す 。 


number js not defined 


6 行 で て エラー で す 
fle///C:/Users/%E5%SF%A4%WE7%B1%SF%20WE4 
%BSW%WS0WE6%B5%A9/Desktop/sample 

/ js/sample.js 
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呈 E ビ ピ TI 口 N- 品 14 
イベ ント 処理 に つい て 


唱 JavaScript の イベ ント の 設定 と 解除 
]avaScript で は 、「 要素 が クリ ッ ク さ れ た 」「 マ ウス が 重なっ た 」 | ペー ジ が 読み 込ま れ た 」 な 


ど 、 さま ざま な イベ ント が あり ます 。 主 な イベ ント は 、 次 の 表 の よう に な り ま す 。 


mousedown マウ ス の 左 ボ タン が 押さ れ た 



















keydOwn Ca 
| load 。 | 読み 込み が 完了 し た 


画面 か ら 指 が 離さ れ た 

JavaScript で イベ ント を 設定 する に は 、 要素 に 用 意 さ れ て いる プロ パテ ィ に イベ ント ハン ドラ 
(イベ ント 発生 時 に 呼び 出す 関数 ) を 設定 し ます 。 イベ ント ハン ドラ を 設定 で きる プロ パテ イィ 名 
に は 規則 が あり 、 イベ ント 名 の 先頭 に 「 on」 を 付加 し た も の に な り ま す 。 た と えば 、| click」 イ ベン 
ト で あれ ば 、[onclick」 プロ パテ ィ に イベ ント ハン ドラ を 設定 し ます 。 また 、 設定 し た イベ ント ハン 
ドラ を 解除 する に は 、「onclick」 プ ロ パ ティ に 「nul」 を 設定 し ます 。 他 の イベ ント も 同様 に 設定 ・ 
解除 する こと が で きま す 。 

イベ ント は 、 イベ ント リス ナー を 使っ て 設定 する こと も で きま す 。 イベ ント リス ナー を 使っ て 設定 す 
る 場合 は 、 す で に 設定 され て いる イベ ント を 上 書き し ませ ん 。 多 人 数 で の 作成 や 、 ラ イブ ラリ を 
作成 利用 する の に 便利 で す 。 イベ ント リス ナー を 設定 する に は 、| addEventListener()」 メ ソ ッ 
ド を 使い ます 。「addEventListener() 」 メソッド に は 、「 イ ベン ト 名 」| イベ ント ハン ドラ 」 | イベ ント 
の 伝達 方 向 ] の 3 つ を 指定 し ます 。「addEyventListener() 」 メ ノッ ド で 設定 し た イベ ント を 解除 
する に は 、「removeEventListener() 」 メ ノッ ド を 使い ます 。 た だ し 、「addEventListener() 」 メ 
ソ ッ ド で 無名 関数 を 使用 し た 場合 は 、 イベ ント を 解除 で き な い の で 往 意 が 必要 で す 。 

な お 、 イ ベン ト に つい て は 、 CHAPTER 09 を 参照 し て くだ さい 。 


唱 サン ブル で の 動作 の 確認 

次 に コー ド で は 、 リス ト 項 目 が クリ ッ ク さ れ た ら 、 イベ ント ハン ドラ を 呼び 出し ます 。 最初 の リス ト 
項目 は 「onclick」 プロ パテ ィ に イベ ント ハン ドラ を 設定 し て あり 、 クリ ッ ク す る と アラ ー ト ダイ アロ グ 
が 表示 され ます 。 2 番目 の リス ト 項 目 は 、 イベ ント リス ナー を 使っ て 2 つの イベ ント ハン ドラ を 設定 し 
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て いま す 。 この た め 、 クリ ッ ク す る と 、 2 回 アラ ー ト ダイ アロ グ が 表示 され ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





LL 
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<head> 
<rietq charset="utf-8"> 


<tttte>SqmpLe</t1tle> 





<SCrtDt Src="]S/sqmple .]S"></scr1pt> 
</hegd> 
<body> 
<h1> イ ベン ト を 設定 </h1> 
<ul> 
<lt> 頂 目 1</11> 
<lt> 項 目 2</11> 
<li> 項 目 3</11> 
</ul> 
</body> 
</html> 


JavaScript の コー ド (sample.j5) 


wtndow.onlogd = functton(){ 

// イベ ント を 設定 する 要素 を 読み 出し 

var ele = document.getEtementsByTagName( "11"): 

// 最初 の 1 要素 に イベ ント ハン ドラ を 設定 

ele[ の 9] .oncltck = functton(){ 
qglert("cLtck 1"): 

} 

// 2 番目 の い 1 要素 に イベ ント リス ナー を 設定 

etle[1] .qddEventListener(C"cltck",、 functtonCevt){ 
qtert("cltck 2-1"): 

+, true): 

// 2 番目 の 1 要素 に 、 さ ら に イベ ント リス ナー を 設定 

ele[1] .qddEventLtstener("ctick", functton(Cevt){ 
alert("cltck 2-2"): 

+。 tPue): 


ブラ ウザ で index.html を 表示 し 、 最初 の 項目 を クリ ッ ク す る と 、 アラ ー ト ダイ アロ グ が 1 回 、 表 
示さ れ ま す 。 


イベ ント を 設定 


・] 自 目 1 
・] 自 日 2 
・」 自 目 3 
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2 番目 の 項目 を クリ ッ ク し た 場合 、 2 回 アラ ー ト ダイ アロ グ が 表示 され ます 。 





mml 画 和 IN 上 5ーB で の イベ ント 設定 


IE6-8 で は 、「addEventListener() 」「removeEventListener() 」 メ ソ ッ ド が あり ませ 
ん 。 代 わり に 「attachEvent() 」「detachEvent()) 」 メ ノッ ド を 使い ます 。 「attachEvent() 」 
メソ ッ ド 、「detachEvent () 」 メ ソ ッ ド と も パラ メー タ は 同じ で 、 最初 に イベ ント 名 、 2 番目 に イ 
ベン ト ハ ンド ラ を 指定 し ます 。 イベ ント 名 は 、「onclick]」 の よう に 、 先頭 に | on」 を 付け る 必要 
が あり ます 。 具体 的 に は 次 の よう な コー ド に な り ま す 。 








wtndow.ontogd = functton(){ 
// イベ ント を 設定 する 要素 を 読み 出し 
var ele = document.getEtLementsByTagName( "11"): 
// 最初 の 要素 に イベ ント ハン ドラ を 設定 
ele[9] .oncltck = functton(){ 
qtert("cltck 1"): 
} 
// 2 番目 の 1 要素 に イベ ント リス ナー を 設定 
ele[1] .qttachEvent("oncLtck" , functton(evt)+ 
alert("cltck 2-1"): 
}): 
// 2 番目 の 1 要素 に 、 さ ら に イベ ント リス ナー を 設定 
ete[1] .attachEvent("oncltck" , functton(evt){ 
alert("cltck 2-2"): 
}): 








} 


な お 、[「addEventListener () 」 メ ソ ッ ド の 場合 は 登録 し た 順番 に イベ ント ハン ドラ が 呼 
び 出 され ます が 、「 attachEvent() 」 イ ベン ト の 場合 は 最後 に 登録 し た イベ ント ハン ドラ か 
ら 呼 び 出 され ます (「addEventListener() 」 メ ノッ ド と は 逆 の 順番 に な る ) 。 
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EL 1 4EJN- 選 1 己 


ドキ ュ メ ント オブ ジェ クト モデ ル に つい て 





則 JavaScript で の HTML 文 書 /XML 文 書 の 扱い 
JavaScript で は 、 プラ ウザ 上 に 表示 され て いる HTML の 要素 や XML デー タ 内 に ある 要素 


に 対し て アク セス し 、 処理 する 方 法 が 用 意 さ れ て いま す 。 Web ブ ラウ ザ で は 、 HTML/XML 
文書 は ドキ ュ メ ント オブ ジェ クト モデ ル (DOM:Document Object Model) を 採用 し て お 0、 
JavaScript で も ドキュ メン ト オ プ ジェ クト モデ ル に 従っ た 文書 を 操作 する た め の メ ソ ッ ド や プロ パ 
ティ が 用 意 さ れ て いま す 。 主 な メソ ッ ド や プロ パテ ィ は 、 次 の 表 の よう に な り ま す 。 

ドキ ュ メ ント オプ ジェ クト モデ ル で は 、 HTML/XML 文 書 の 階層 を 保っ た まま 処理 を 行い ま 
す 。 この た め 、 複 雑 な 構造 や 深い 階層 の 場合 な ど で は 、 処 理 速度 が 低下 する こと が あり ます 。 


指定 し た ID 名 の 要素 に アク セス する 


テキ スト ノー ド を 生成 する 
子 ノ ー ド と し て 末尾 に 追加 する 


プロ パテ ィ 
最後 の 子 ノー ド 














な お 、 ド キュ メン ト オ プ ジェ クト モデ ル (DOM) に つい て は 、CHAPTER 08 を 参照 し て くだ さい 。 





中 サン プル で の 動作 確認 
炊 の コー ド で は 、 最初 の リス ト 項 目 に 関す る 情報 が 表示 され ます 。 また 、 ノー ド を 生成 し 、 4 
番目 の リス ト 項 目 と し て 「i」 要 素 を 追加 し て いま す 。 


HTML(index.html) 


<!DOCTYPE html> 
<html> 
<head> 


<metq Charset="utf-8"> 


先王 ロ 丁 | 口 ト N! - 口 15 m ドキ ュ メ ント オブ ジェ クト モデ ル に つい て 


<ttt1e>Sample</title> 4 
<SCrtpt src="]S/sqmpte .]S "></SCr1Dt> 
</heqd> 
<body> 
<h1>DOM の 処理 </h1> 
<ul> 
<li> 項 目 1</11> 
<li> 項 目 2</11> 
<lt> 項 目 3</11> 


</ul> 





<hr> 
<output 1d="reSsult"></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.onload = functton(){ 


過 汎 装 此 「+ 器 洋 脂 ③1dIJOSBAB「 に EE に 4se 


var ele = document.getEtementById("result"): 

// 操作 する 要素 を 読み 出す 

var ltst = document .getEtementsByTaqgName(" 11"): 

// 最初 の li 要素 の nodeType や nodeVatue な ど を 表示 
ele.innerHTML = "nodeType : "+Ltst[9@] .nodeType+"<br>": 
ele.innerHTML += "nodeVatue : "+lLtst[9] .ftrstChttd.nodeValue+"<br>"・ 
ele.1tnnerHTML += "taqgName : "+Litst[9] .togName+ "<br>": 
// テキ スト ノー ド を 作成 

var text = document.createTextNode( "追加 項目 "): 

// 1i 要 素 を 生成 し 子 ノ ー ド と し て テキ スト を 追加 

var li = document.cregteElement("11"): 

11 .qgppendChtld(text): 

// リス ト の 最後 に 要素 を 追加 

document .getEtLementsByTagName( "ul ")[9] .gppendChtld( れ ): 


ブラ ウザ で index.html を 表示 する と 、 リス ト 項 肥 こ 関す る 情報 が 表示 され 、 リス ト 項 目 が 1 つ 
追加 され ます 。 


nodeValue - 1 生日 
tagName - LI 





7/S 





Ll 
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唱 DOM の 階層 図 
DOM の 階層 図 は 、 次 の よう に な り ま す 。 


今 Built-in Object 


Global Math String Int8Array 
2 int16Array 
Date Number Array 


Boolean Function 


Window (デバ ッ ガ 用 オブ ジェ クト ) 


Location Screen 
FileReader 

Derformance IndexedDB 
AudioData: 


meoe umk | rugn | sae 








Abute| hidNode 
AcelerationlndludingGraviy 


Form 「 DataTransfer 
6 ーー |RotationRate| 
1 ( RotationRate 

ar Option 


| 9e 

Lam 
| eer | mw 
| ae mmmw 





※ 太 字 は HTML5 関連 の オブ ジェ クト 





at II 


ーー 


3 


オフ ジェ クト 





「 
「 


NM d 
Ne 











LIE6 』Chrome Safari 5 | Firefox 4 1 Opera11 1 iOS4 1 Android2 IWP_ 


BE 上 じじ TIHN- 品 16 


文字 列 や オブ ジェ クト を 評価 する 








ここ で は 、 JavaScript の 文字 列 や オブ ジェ クト を 評価 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<htmt> 





<head> 
<metg charset="utf-8"> 
<tttle>Sample</ttt1e> 
<SCPtDt src="]S/sqmple .]S"></scrtpt> 
</head> 
<body> 


<OUtDU キ ></OutDut> 


テ NYHVAJS に に IE に 4SFm 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oqd"。 functton(){ 
var ele = document .getEtementsByTagName( "output")[9] : 
// 変数 に 評価 する 文字 列 を 代入 
var text = "Math.pow(2。 8)+(199/19)*2": 
// evgl() で 評価 
Var result = eval(text): 
// 結果 を 出力 
ele.tnnerHTML = text+"<br> "+result: 
}, false): 


プラ ウザ で index.html を 表示 する と 、 評価 する 式 と 評価 し た 結果 が 表示 され ます 。 


Math pow(2. 8 十 (100/10)*2 
276 
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司 ビ ビビ ピ T イ | 口 届 - 口 16 mm 文字 列 や オブ ジェ クト を 評価 する 


msIN 下 式 や 文 の 評価 を 行う に は 「eval()」 メソ ッ ド を 使う 


JavaScript で は 、 オプ ジェ クト や 文字 列 を | eval()) 」 メ ソ ッ ド を 使っ て 評価 する こと が で 
きま す 。 これ に よっ て 、 文 字 列 を スク リプ ト と し て 解釈 し 、 実 行き する こと が で きま す 。「 eval 
() 」 メ ノッ ド に 指定 で きる の は 評価 可能 な も の で あれ ば 式 で も 文 で も 構い ませ ん 。 非 同 
期 通信 を 使っ て 読み 込ん だ TSON 形 式 を JavaScript の オブ ジェ クト に する 際 に 利用 され 
る 場合 も あり ます 。 た だ し 、 この 場合 、 不正 な コー ド が 含ま れ て いる と 思わ め ぬ 不 具合 を 発 
生き させ る こと が あり ます 。 JSON デー タ を 変換 する 場合 に は 、| JSON.parse (0 」 メ ノッ ド が 
使え る の で あれ ば 、 これ を 使用 する 方 が よい で し ょ 2 う 。 





7NHNANIS に に EE に 4 Sa 


mal 中 四 に 上 較 ビル トイ ン オ ブ ジ ェクト 


ECMA-262 5th (ECMA Script) で は 、 次 の 表 の ビル トイ ン オ プ ブ ジ ェクト が 定義 され て 


いま す 。 プラ ウザ で は ビル トイ ン オ ブ ジ ェクト に 加え て 、| window」 や | document」 な ど 、 
非常 に 多く の オブ ジェ クト が あり ます 。 


四 
各種 


| Number | 数値 。。 


0 - ず ・ * ーー 
大 ii( 候 
さ 
\ 
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LIE6 』 Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS4 | Android2 1WP 





=1 コ mlmlN 昌 ahP/ 
数 値 か ご うか 調べ る 


ここ で は 、 数 値 か どう か 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 


SW ヨコ ヨ コ マロ ロ 


<mietqg charset="utf-8"> 


7 
の 


NTHN 


<tttle>SqmpLe</t1ttle> 
<SCP1Dt SrC="]S/sample . ]S"></SCr1Dt> 
</hegd> 
<body> 
<OUtDut></OutDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventListener("toad" 。 functton(){ 
var ele = document.getEtementsByTagName( "output")[9] : 
// 変数 に 小数 値 を 文字 列 と し て 代入 
var daqta1 = "1969.215": 
// 変数 に 数 値 を 代入 
var data2 = 20935 .92: 
// 変数 に 文字 列 を 変換 
var daqta3 = “JavaScrtpt": 
// data1 が 数 値 以 外 か どう か 調べ る 
var flag1 = isNaN(data1 ) : 
// datg2 が 数 値 以 外 か どう か 調べ る 
var flqg2 = tsNoN(data2):, 
datg3 が 数 値 以外 か どう か 調べ る 
var flag3 = tsNoN(dato3): 
/ windown オ プ ジ ェ クト が 数 値 以外 か どう か 調べ る 
var flag4 = tsNaNCwtndow): 
未定 義 の プロ パテ ィ を 調べ る 
var flag5 = tsNaNCwtndow. evol): 
結果 を 出力 
ele.tnnerHTML = flag1+"<br>"+ftag2+"<br>"+f1qg3+ "<br>"+f1og4+ "<br>"+f1og5: 
+, foqlse): 
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還 ビビ ロ TI 口 N - 口 1 ワ m 数 値 か どう か 調べ る 


プラ ウザ で index.html を 表示 する と 、 変数 や オプ ジェ クト が 数 値 以 外 か どう か 調べ た 結果 
が 表示 され ます 。 


mml 記 中 数 値 か どう か を 調べ る に は 「ijSNaN()」 メソッド を 使う 


TavaScript で は 、 数 値 か どう か を 調べ る に は 、「isNaN() 」 メ ソ ッ ド を 使い ます 。 パ ラメ ー 
タ に 指定 され た 内 容 が 数 値 に 変換 する こと が で き な か っ た 場合 は | true」 を 、 数 値 に 変 
換 で きた 場合 は | false」 を 返し ます 。 数 字 で 表現 され る 文字 列 の 場合 、 数 値 に 変換 で き 
る の で あれ ば 、 サン プル の よう に 「false」 と な り ま す 。 


miml 員 引 に 上 整列 仁 か どう か 調べ る 


「0」-「9] ま で の 数 値 だ け で 構成 され て いる か 、 つま り 、|+] 記 号 が な い 整 数 値 か ど 
うか 調べ る に は 、 次 の よう に 正規 表現 を 使い ます 。 














var ele = document .getEtementsByTagName( "output")[9] : 
// 変数 に 数 値 を 文字 列 と し て 代入 
var numStr = "1969215": 
// 正規 表現 を 使っ て 調べ る 
var data = numStr.match( 作 D/g): 
// 結果 を 出力 
tf (data === null){ 
ele.tnnerHTML = "9 の 9 の 数 値 で す ": 
+etset 
ele.innerHTML = "9 の 9 の 数 値 で は あり ませ ん ": 





} 








ブ NHNANIN に EE だ FE4 ミ ド 」 
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LIE6 」Chrome 1 Safari 5 | Firefox 4 Opera 11 | OS4 1 Android2 IWP_ 


ラ 5 上 ビビ THN- 品 1 日 


文字 列 を エス ケー プ 化 / エ ンコ ー ド / デ コー ド す る 








ここ で は 、 文字 列 を エス ケー プ 化 / エ ンコ ー ド / デ コー ド す る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 

<metg charset="utf-8"> 

<t1 せ le>Sqmple</t1 人 tte> 

<SCP1Dt Src="]S/Sample .]S"></scrtpt> 
</head> 


NHNANIN EEE に 4 ミ ドロ 


<body> 
< く OUtDut キ ></ OutDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("tLoad" 。 functton(){ 

var ele = document .getEtementsByTagName( "output")[9] : 

// 変数 に 文字 を 代入 

var text = " 莉 nmz-7997text= い ろ は ": 

// エス ケー ズブ 文 字 に 変換 

var Str1 = escaqpe(tex): 

// エス ケー プ さ れ た 文字 か ら 変 換 

var Str2 = uneSscqDe( Str1 ) : 

// 文字 を エン コー ド す る 

var Str3 = encodeURI(text): 

// エン コー ド さ れ た 文字 を デコ ー ド する 

var Str4 = decodeURI(str3): 

// 文字 を エン コー ド す る 

Var Str5 = encodeURIComponent(text): 

// エン コー ド さ れ た 文字 を デコ ー ド する 

var Str6 = decodeURIComponent(str5): 

// 結果 を 出力 

ele.tnnerHTML = "escqgpe : "+str1+"<br>unescape : "+Str2+"<br>": 

ele.tnnerHTML += "decodeURT : "+str3+"<br>encodeURT : "+str4+"<br>"・ 

ele.tnnerHTML += "decodeURIComponent : "+str5+"<br>encodeURTComponent : "+str6: 
}, foglse): 
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午 王 ピロ 丁 | 口 NN - 口 1 日 mW 文字 列 を エス ケー プ 化 / エ ンコ ー ド / デ コー ド す る 


ブラ ウザ で index.html を 表示 する と 、 文字 を それ ぞ れ 変換 処理 し た 結果 が 表示 され ます 。 


escapce : 9623mz- 700963Ftext963D96u304496u308D96u306F 
unescape : #mz-7007textd いろ は 
| decodeURI - jnz-7007tecxt=96E39681968496E39682968D96E3968196AF 
encodeURI - お nz-7002tex いろ は 
decodeURIComponent - 9623mz-700963Ftext963D96E39681968496E39682968D96E3968196AF 
encodeURIComponent - nz-7007textd いろは 





ナ NHNNIN EETTESEZS 


文字 を エス ケー ブ 化 する に は 「escape()」 「encodeURI()」 
「encodeURIComponent()」 関数 を 使う 


サー バー に デー タ を 送信 する 際 に 記号 な ど は 変換 する 必要 が あり ます 。 avaScript で 
は 、| escape() br ) 」 | encodeURIComponent() 」 の 3 種類 の 関数 で 文字 を 
エン コー ド (符号 化 ) で きま す 。 これ ら の 関数 で エン コー ド し た 文字 列 を 元 に 戻す (デコ ー ド / 
復号 化 ) す る に は 、| unescape( 」 | decodeURI() 」「 decodeURIComponent (0) 」 関数 を 
使い ます 。 それ ぞ れ の 関数 で どの 文字 が 変換 対象 に な る か は 、 次 の よう に な り ま す 。 な お 、 
左上 は スペ ー ス を 表し て いま す 。 


ロロ NEPOHINT 


⑯ | eSCape()」 で 変換 され る 文字 


一 回 回 四 EE3E 固 9M 回 回 還 回 還 防 


|9|112131415]6|71819|: 有 <|=lz1? 
l@lAlBIClDIEIFIGIHIIIJIKILIMINIO」 
IPIQIRISITluIvIWIXIYIzIEINIIAI_ 
lglplcldlelflglhliljikltlmlnlo 
lplqlrlsltlulvlwlxlylzl 村 中 中 > 


⑯ | encodeURI()」 で 変換 され る 文字 
田 回 回 回 EE3E3 加 KM 回 回 同 回 還 肪 
|9|112131415]6|71819|:] |<l=|z| 7 | 
l@|AlBIClDIEIF|IeGlHIIIJIKILIMINIO 


lPIQIRlsITlulvIWlxlYlzIEINIHIAI_」 
lglplcldlelflglhliljlkitlmlnlol 
lplqlrlsltlulylwlxlylzll- 


⑯ | encodeURIComponent()」 で 変換 され る 文字 


画 加 較 回 EEE【4 了 回 回 同 回 還 際 
9|112131415l6l71819]:islmlzlg 
I@|IAlBICIDlEIFIGlHITIJIKIUIMINIOI 
lPlQIRISITlUlvIWIXIYIzZIEINIHIAI_」 
lglglcldlelflglhliljlkitlmlnlol 
lplglrlsltlulvlwlxlylzl 和 中 中 - 


| | %xx 形 式 に 変換 され る 文字 
| | 変換 され な い 文 字 
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LIE6 』Chrome Safari 5 」 Firefox 4 1 Opera 11 1 iOS4 」 Android2 1 WP」 





=1 ヨ miglmlN 提 agk= 
贅 憎 に 変換 する / 数 値 の 単位 を 削除 する 


ここ で は 、 文字 列 で 表現 され て いる 文字 を 数 値 に 変換 する 、 数 値 の 単位 を 削除 する 方 法 
に つい て 解説 し ます 。 





[〕 
エ 
< HTML の コー ド (index.html) 
「 <!DOCTYPE html> 
<html> 
で プ <head> 
ジ <metq charset="utf-8"> 
ド <tttle>Samp le</t1t1e> 
<SCrtDt Src="]S/Ssqmple.]S"></sCrtpt> 
</head> 
<body> 
<OUtDut キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("1ogd"。 functton(){ 

var ele = document.getEtementsByTagName( "output")[9] : 

// 変数 に 小数 値 を 文字 列 と し て 代入 

var num1 = "1969.215": 

// 変数 に 単位 付き の 値 を 文字 型 と し て 代入 

var num2 = "32 の .25px": 

// num1 を 整数 値 に 変換 

var n1 = parseTnt(num1 ): 

n1 =n1+ 1: // 1 を 加算 

// num1 を 小数 値 に 変換 

var n2 = parseFltoat(num1): 

n2 =n2+ 1: // 1 を 加算 

// num2 を 整数 値 に 変換 

var n3= parseTnt(num2Z ): 

n3 =n3+ 1: 

// num2 を 小数 値 に 変換 

var n4= parseFtoqt(numZ): 

n4 = n4 + 1: 

// 結果 を 出力 

ele.tnnerHTML = n1+"<br>"+n2+"<br>"+n ロ 3+ "<br> "+n4 : 
+, foalse): 
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思 ビ ピ T| ロ NN - 口 19 mW 数値 に 変換 する / 数 値 の 単位 を 削除 する 


プラ ウザ で index.html を 表示 する と 、 文字 で 表現 され て いる 値 を 数 値 に 変換 し 、 演算 し た 
結果 が 表示 され ます 。 





文字 を 数 値 に 変換 する に は 
Ni 引 議 「parselnt()」 メ ソ ッ ド や 「parseFloat()」 メソッド を 使う 


]avaScript で は 変数 に 代入 され て いる 内 容 が 数 字 を 示し て いて も 、 それ が 文字 型 
の 場合 に は 通常 の 算術 演算 が 行わ れ ま せん 。 た と えば 、 変数 [n」 に 「"12"」 と いう 文字 
型 で 表現 され て いる 数 値 が ある 場合 、「+」 記 号 を 使っ て |3」 を 加算 する と 、| 15] で は な く 
「 123] と な っ て し まい ます 。 これ は 文字 列 同士 の 連結 に な っ て し まっ て いる た めで す 。 こ 
の よう な 場合 、 文字 型 の 数 値 を 数 値 型 に 変換 する 必要 が あり ます 。 文字 型 に な っ て い 
る 数 値 を 数 値 型 に 変換 する メソ ッ ド と し て 、「parseInt() 」 メ ソ ッ ド と 「 parseFloat() 」 メ ソ ッ 
ド が あり ます 。「parseInt() 」 メ ノッ ド は 整数 値 に 、| parseFloat( 」 メ ソ ッ ド は 小数 値 ま で 
を 含め て 変換 し た 結果 を 数 値 型 と し て 返し ます 。 

また 、CSS に 関す る プロ パテ ィ を 読み 出し た 際 、「 "320px"」 の よう に 単位 が 付随 し て い 
る 場合 が あり ます 。 座標 値 を 読み 出し て 演算 し た い 場合 に は 、 この 単位 が 邪魔 に な り ま 
す 。 そこ で 「parseInt() 」 メ ソ ッ ド や 「parseFloat() 」 メ ノッ ド を 使え ば 、 この 単位 部 分 だ 
け を 削除 する こと が で きま す 。 

な お 、 文字 を 数 値 に 変換 する に は 、「"1234" - 0:」 の よう に 、「0」 を 減算 する 方 法 も あり 
ます 。 


mm 間 IN Gval() | メソ ッ ド で 文字 を 数 値 に 変換 する 


文字 を 数 値 に 変換 する に は 、「parseInt() 」 メソ ッ ド や 「parseFloat() 」 メ ノッ ド を 
利用 する 以外 で も 、 式 評価 を 行う | eval() 」 メ ソ ッ ド を 利用 する 方 法 も あり ます 。| eval 
("12.3") 」 の よう に パラ メー タ を 指定 する と 式 の 評価 (演算 ) が 行わ れ 、「12.3] と いう 数 値 
に な り ま す 。 また 、「eval(12.3+2*Math.PT') 」 の よう に 計算 式 を 指定 する こと も で きま す 。 
「 eval() 」 メ ノッ ド は 、 avaScript で 処理 で きる も の で あれ ば 、 計算 式 で も メソ ッ ド で も プ 
ロ パ ティ で も 評価 ・ 実 行 が 行わ れ ま す 。 た だ し 、「eval() 」 メ ソ ッ ド は 処理 速度 が 速く な い 
の で 高速 に 処理 する 場合 は 使用 を 避け た 方 が よい で し ょ う 。 また 、 パラ メー タ に よっ て は 、 
セキ ュ リ ティ ホー ル の 原因 に な る こと も あり ます 。 

























テ NYHNA へ JIS に E き 導 ミ に 4 ミロ 
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テ NTHW^AJIS EE だ た に EE に 4 Sm 
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LIE8 』Chrome Safari 5 | Firefox 4 1 Opera 11 | iOS4 】 Android2 1 WP 」 


9 も に | 1 し JNN る 


JavaScCriDt の デー タ を 
JSON 形式 に 変換 する 


ここ で は 、 JavaScript の デー タ を TSON 形 式 に 変換 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<metg charset="utf-8"> 
<tttle>SqmpLe</t1t1e> 
<SCP1pt Src="]S/saqmple.]S"></scrtpt> 
</heqd> 
<body> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1ogd"。 functton(){ 
var ele = document.getEtementsByTqgName( "output")[9] : 
// JSON 形式 に 変換 する 例 と し て 配列 を 作成 
var myArray = ["DARIUS" , 1969, 
{ opactty: 9.5, 


top: "129px" 。 
flag : true 
}, 
["ZAVIGA" 。 "B-WING"] 


」j 
// JSON 形式 に 変換 
var ]Ssondata = JSON.strtngify(myArray): 
// 結果 を 出力 
ele.tnnerHTML = ]jsondata+"<br>"・ 
// オプ ジェ クト プ メ ソ ッ ド を 含む 
var myOb]ject = { 
msg : functton(text){ qtert(text): }, 
data : 1234.56, 
name : "KF" 
}: 
// JSON 形式 に 変換 
var ]SondataZ = JSON.strtngtfy(myO0b]ect): 
// 結果 を 出力 
ele.1nnerHTML += ]sondatg2+"<br> "・ 
// 自前 で 独自 形式 に 変換 
Var }Ssondatg3 = JSON.strtngtfyC(my0b]ject, functionCkey, vaqlue){ 


衝 王 ロ 丁 | 口 NN - ロ 2 ロ mW JavaScript の デー タ を JSON 形式 に 変換 する 





tf (new StringCvatue).1ndexOf("functton") > -1) { K4 
return new Strtng(valLue): 

} 
return value: 

} う : 

// 結果 を 出力 

ele.tnnerHTML += ]jsondata3+"<br>": 

+, false): 


ブラ ウザ で index.html を 表示 する と 。 JSON 形式 に 変換 し た 結末 が 表示 され ます 。 


"DARIUS".1969.{"opacity"0.5."top" "120px"."fag" tue).["ZAVIGA""B-WING"] 
("data"-1234.56."name":"KEF") 
| ("msg" "function(text){ alert(text): )"."data"-1234.56."name""KF") 


テ ナ NYHNAIS に に FE に 4 ミド 





JavaScript の デー タ を JSON 形式 に 変換 する に は 
MM 「JSON.stringify()」 メ ソ ッ ド を 使う 


TSON は 、 JavaScript で 扱え る 軽量 な デー タフ ォ ー マ ッ ト で す 。 JavaScript の デー タ を 
JSON 形式 に 変換 する に は 、「JSON.stringify ) 」 メ ソ ッ ド を 使い ます 。 関数 や オプ ジェ ク 
ト 、 メソ ッ ド が 含ま れる 場合 、 期待 通り に JSON 形式 に 変換 され な い 場 合 が あり ます 。 この 


よう な 場合 、「 JSON.stringify () 」 メ ソ ッ ド の 2 番目 の パラ メー タ に 関数 を 指定 する こと で 独 
自 に 変換 処理 する こと が で きま す 。 この 関数 に は | key」 と | value」 が 渡さ れる の で 、 そ 
れ ら に 応じ て 処理 する こと で サン プル の よう に メソ ッ ド も 文字 列 に 変換 する こと が で きま す 。 
た だ し 、 オブ ジェ クト で な く 、 配列 の 場合 は 要素 ご と に | key」 と | value」 が 渡さ れず 、 一 
括 し て 関数 に 渡さ れ ま す 。 





関連 項目 ょ ゅ 
eijSON 形 が ら オ プ ジ エ クト に 変質 す あい ドド ドド ピロ 2 ロバ p.88 
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LIE8 上 Chrome 1 Safari 5 | Firefox 4 』 Opera 11 | iOS4 1 Android2 1WP」 


BEUDTIHN- ロ ロジ 1 


JSON 形式 が か ら オ ブ ジ ェクト に 変換 する 








ここ で は 、 JSON 形式 か ら JavaScript の オブ ジェ クト に 変換 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metq charset="utf-8"> 
<tttle>Sqmple</tttte> 
<SCrtDpt SFPc="]S/sampte .]S"></scrtpt> 
</head> 


7NHNNN に EE に 4EE 


<body> 
<OutDut キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("toad",。 functton(){ 





var ele = document .getEtementsByTogName( "output")[9] : 
// JSON デー タ を 変数 に 代入 (非同期 通信 で 読み 込む 方 式 で も 可 ) 
Var' datqa1 = 
「L"DARIUS" ,1969,{"opacity":9.5,"top":"129px" "flag" :true+,["ZAVTGA" ,"B-WTNG"]] 
var data2 = '{"data":1234.56, "nagme" :"KF" す は"・ 
// JSON 形式 か ら 変 換 
var ob]1 = JSON.parse(datg1): 
var ob]2 = JSON.parse(datq2): 
// 結果 を 出力 
ele.1nnerHTML = ob]j1+"<br>"+ob]2+"<br> ": 
// 内 容 を 読み 出し て 出力 
ele.1nnerHTML += ob]j1[2] .opacity+"<br>": 
ele.1nnerHTML += ob]2 .name : 
+。 faqlse): 


プラ ウザ で index.html を 表示 する と 。 ]SON 形 式 か ら 変 換 し て 読み 出し た 内 容 な ど が 表示 
され ます 。 


DARIUS.1969.[object Object].ZAVIGA B-WTNG 
に 


KF 
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m 王 ビ ピ ロ T| 口 N - 口 2 ] mw JSON 形式 か ら オ ブ ジ ェクト に 変換 する 


= き 応 上 =IN 下 JSON 形式 か ら オ ブ ジ ェクト に する に は 「JSON.parse()」 メ ソ ッ ド を 使う 


非同期 通信 な ど を 使っ て サー バー か ら 読 み 込 まれ た JSON 形式 を JavaScript の オプ 
ジェ クト 形式 に 変換 する に は 、「JSON.parse ()) 」 メ ソ ッ ド を 使い ます 。 | eval()」 メ ソ ッ ド で 


も る 変換 する こと は で きま す が 、「]SON.parse() 」 メ ソ ッ ド の 方 が 、 より 安全 に 変換 する こと 
が で きま す 。 

また 、 jQuery ライ ブラ リ な ど で は 、 あら か じ め JSON 形 式 か どう か 調べ て か ら 処 理 を 行 
う よ う に な っ て いる も の も あり ます 。 


mm 韻 昌 2 上 是 10C ヨ 1 StOFaEG と JSON 


デー タ を ロー カル ディ スク 上 に 保存 する 場合 に 多く 利用 され る の が 、 Local Storage で 
す 。 この Local Storage に デー タ を 保存 する 場合 、 文字 列 で 保存 する 必要 が あり ます 。 配 
列 や 各種 オブ ジェ クト は 、 その まま で は 保存 で きま せん 。 この た め 、 配列 オブ ジェ クト な ど は 、 
[JSON.stringify () 」 メ ノッ ド を 使っ て 保存 する 必要 が あり ます 。| JSONstrmgify」 メ 
ソ ッ ド を 使っ て 保存 し た 配列 オブ ジェ クト な ど は 、「TSONparse()) 」 メ ノッ ド を 使っ て 元 に 戻 
すこ と が で きま す 。 な お 、「window」 オ ブ ジ ェクト な ど は 、「JSON.stringify()) 」 メ ソノ ッ ド を 使っ 
て 変換 する こと は で きま せん 。 また 、| RegExp」 オ ブ ジ ェクト も | JSON.strimgify () 」 メ ノッ ド を 
使う と 、 空 の オブ ジェ クト で ある 「『」 に 変換 され ます 。 





ナ NHN^ANIS EEE に 4 ミ ピ 













内 放 下 三 自 用 2 
【 JavaScript の デー タ を JSON 形式 | こ 変 換 する iiioemereeenenrnrnmnnr p.86 
「 】 Web Storage に デー タ を 設定 する 0 も 896 が の を 生ま あす の まる も 定 が 9 WE 役人 で : 二 ::0 っ D./38 


89 


LIE6 』Chrome 1 Safari 5 』 Firefox 4 | Opera11 1 iOS 4 | Android2 1WP」 





ご 1 = 還 時 価 較 画 に に 四 ジン タン 
オブ ジェ クト を 生成 する 


ここ で は 、 オプ ジェ クト を 生成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 

<eta charset="utf-8"> 

<tttle>Sqmp Le</t1tte> 

<SCPr1Dt Src="]S/sqmple.]S "></scrtDpt> 
</heqd> 


ブ NTHNAJUS EE に EE4 ミ ピロ 


<body> 
<OUt て DU キ ></OUtDUu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. addEventLtstener("1oqd" functton(){ 
vaqr ele = document .getElementsByTagName( "output ")[9] : 
// オプ ジェ クト を 生成 
var myOb]1 = new 0bject(): 
// オプ ジェ クト を 作成 
Var my0bJ2 = ェ {B: 
// オプ ジェ クト を 作成 
var myOb]3 = { nagme : "Yoshinart" +: 
// 結果 を 出力 
ete.1nnerHTML = "myOb]1 : "+myObj1.toStrtng(): 
ele.1nnerHTML += "<br>my0b]2 : "+myOb]2.toStrtng(): 
ele.tnnerHTML += "<br>myO0b]3 : "+myOb]3.toStrtng(): 
ele.tnnerHTML += "<br>myO0b]3.name : "+myOb]3.name: 
+, false): 


ブラ ウザ で index.html を 表示 する と 、 3 つ オ ブ ジ ェクト を 生成 し た 結果 が 表示 され ます 。 最 
終 行 で は オブ ジェ クト の プロ パテ ィ の 内 容 が 表示 され て いま す 。 


myObi1 : [object Objecd 
myOb2 : [object Objecd 
myObj3 : [object Objccd 


myOb13 name - Yoshinarn 
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生 ビビ ピロ 丁 | 口 N!| - ロ 2 m オブ ジェ クト を 生成 する 


=mN=lN 細 オ ブ ジ ェクト を 生成 する に は 「new Object()」 と する か が 「{ )」 を 使う 


TavaScript で オブ ジェ クト を 生成 する に は 、「new Object 0 」 と する か 、「} 日 を 使い ま 
す 。「」 日 内 に は 「 キ ー: 値 」 の ペア を 「.」 (カン マ ) で 区 切っ て 複数 、 列記 する こと が で きま 


す 。 この 場合 、 キ 一 名 が プロ パテ ィ 、 また は 、 メソ ッ ド 名 に な り ま す 。 
独自 の オブ ジェ クト で は な く 、 既存 の オブ ジェ クト (String や Array) を 生成 し た い 場 合 
は 、|new」 演 算 子 を 使い ます 。 


mml 両 連 に 較 オブ ジェ クト の 生成 速度 


]avaScript で は 、「new Object() 」 と し て オブ ジェ クト を 生成 する 以外 に 「 1 | と 記述 
し て 生成 する こと も で きま す 。 どちら も オブ ジェ クト が 生成 され る こと に は 変わ り ま せん が 、 
処理 に か か る 時 間 は 大 幅 に 異な り ま す 。「new Object() 」 と し た 場合 と 比べ て |「 | | を 
使う と 、 2 倍 以上 、 高速 に オブ ジェ クト を 生成 する こと が で きま す 。 









関連 項目 ゅ 
e 指定 され た オブ ジェ クト を 継承 し て 新た な オブ ジェ クト を 生成 する …………… て tt D.9 ど 





NHNANIN EE に EN4 ミ ドロ 
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LIE6 1 Chrome | Safari 5 | Firefox 4 1 Opera 11 | iOS4 ] Android2 1WP」 


1 = 時 人 半 1 四 に 田 ン を に 


指定 され た オブ ジェ クト を 継承 し て 
新た な オブ ジェ クト を 生成 する 


ここ で は 、 指定 され た オプ ジェ クト を 継承 し 新た な オブ ジェ クト を 生成 する 方 法 に つい て 解説 
し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











間 に 引 ヨ コマ ロロ 


<head> 


/ 
る 


<retq Charset="utf-8"> 


<tttle>Sqmple</t1t1e> 


NTHN 


<SCrtpt src="]S/sample.]S"></scrtpt> 
</head> 
<body> 
<OUtDut キ ></OUtDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qgddEventLtstener("toad"。 functton(){ 
// オプ ジェ クト を 生成 
var company = { name : "C&R 研 究 所 ", gddress : "新潟 県 " }: 
// オプ ジェ クト を 継承 し て 新た な オプ ジェ クト を 生成 
Var myCompany1 = Ob]ject.create(company): 
// オプ ショ ン を 指定 し て 生成 
var myCompany2 = Ob]ject.cregte(company, { 
Owner : { 
vatue : "Yoshinari"。 // プロ パテ ィ の 内 容 
wrttgbte : fatse。 // 書き 込み 可能 か どう か 
enumerobte : true,。 // 列挙 可能 。 for...in で 出る 
configurgble : fqlse // 再 定義 可能 か どう か 
}, 
Stype : { 
vaqtue : "男性 "。 // プロ パテ ィ の 内 容 
wrttgbte : fatse,。 // 書き 込み 可能 か どう か 
enumerabte : fglse, // 列挙 不可 。 for.. .tin で 出 な い 
configurgble : true // 再 定義 可能 か どう か 
} 
}): 
// 結果 を 出力 
outOb](company, "company" ): 
outOb](myCompany1, "myCompany1"): 
outOb](myCompany2Z, "myCompany2"): 
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先王 ロ 丁 | 口 N - ロ 2 ラコ ョ m 指定 され た オブ ジェ クト を 継承 し て 新た な オブ ジェ クト を 生成 する 


// オプ ジェ クト の 内 容 を 出力 する 関数 W) 
functton outOb](Cob], text)+ 

var ele = document.getEtementsByTagName( "output")[9] : 

ele.tnnerHTML += " 較 "+text+" の 内 容 <br>": 


for(var 1 tn ob}])+# 





ele.tnnerHTML +=1+ " =" obj[1] + "<br>": 
} 
ele.1nnerHTML += "<hr>": 
} 
}。 false): 


ブラ ウザ で index.html を 表示 する と 、 生成 し た オプ ジェ クト の プロ パテ ィ の 内 容 が 表示 され 
ます 。 


ケ ナ NhHN^NIN EETTSEZS 


address = 新潟 県 





mmyCompany2 の 内 容 
owner 王 Yoshinari 
name =C&R 研 究 所 
address = 新潟 県 





オブ ジェ クト を 継承 し 新た な オブ ジェ クト を 生成 する に は 
「Object.create()」 メソッド を 使う 


]avaScript で オブ ジェ クト を 継承 し て 、 新た な オブ ジェ クト を 生成 する に は 、| Object. 
create() 」 メ ソ ッ ド を 使い ます 。 最初 の パラ メー タ に は 継承 元 と な る オブ ジェ クト を 指定 し ま 
す 。 2 番目 の パラ メー タ は オブ ショ ン で 、 プロ パテ ィ に 対し て 次 の 表 の 属性 を 設定 する こと 
が で きま す 。 な お 、 同 時 に 設定 する 属性 の 設定 値 に よっ て は エラ ー と な る 場合 が あり ます 。 


属性 値 
プロ パテ ィ に 書き 込み が で きる か どう か 。「true」 な ら 書 き 込み 可能 、|false」 
wWritable っ 
な ら 不 可 


列挙 可能 か どう か 。「for..in] 文 で の 抽出 対象 に な る か どう か 。 true」 な 


ロロ NEPUHINT 


ら 列挙 可能 、「false」 な ら 列 挙 不可 
再 定義 可能 か どう か 。 「true」 なら 再 定義 可能 、[false」 な ら 再 定義 不可 
セッ ター。 プロ パテ ィ に 値 を 書き 込む 時 に 実行 する 関数 


ゲッ ター。 プロ パテ ィ か ら 内 容 を 読み 出す 時 に 実行 する 関数 





関連 項目 


3 オブ ジェ クト を 生成 する 本 月 が 避 9408. も 人 徐 和 :0 を す す ザ て 人 め や すす 2 な 0 和 垢 0 がき 全 も 基 信 すす D.90 
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LIE6 」Chrome 1 Safari 5 | Firefox 4 1 Opera 11 1 iOS4 』 Android2 1WP 


5EUTIUHN- ロ ジイ 


オブ ジェ クト の イン スタ ンス を 調べ る 








ここ で は 、 オブ ジェ クト の イン スタ ンス を 調べ る 方 法 に つい て 解説 し ます 。 





り HTML の コー ド (index.html) 
ー <!DOCTYPE html> 
5 = <html> 
4 <head> 
ろう <meta charset="utf-8"> 
ン <tttle>SqmpLe</t1tte> 
ク <SCr1Dt src="]s/samplte.]S"></scrtpt> 
</head> 
<body> 
<OUtDut></OuUtDut> 
</body> 
</html> 





JavaScript の コー ド (sample.js) 


wtndow. aqddEventLtstener("1ogd" ,。 functton(){ 
var ele = document.getElementsByTagName( "output")[9] : 
// 各種 オプ ジェ クト を 格納 する 配列 を 用 意 
var my0b] = [: 
// 配列 オプ ジェ クト を 作成 
myO0b][9] = new Array(): 
// Date オ プ ジ ェ クト を 作成 
myOb][1]= new Date(): 
// man オ プ ジ ェ クト を 作成 
myOb][2] = new Man(C"KF",。 43): 
// 特定 の オプ ジェ クト の イン スタ ンス か 調べ 結果 を 出力 
for(var 1= の : 1<myOb].Length: ユ ++){ 
// 配列 オプ ジェ クト の イン スタ ンス か どう か 調べ る 
var flag1 = myObj[1] 1nstanceof Array: 
// Date オ プ ジ ェ クト の イン スタ ンス か どう か 調べ る 
var flogZ2 = myOb][1] tnstaqnceof Date: 
// 自前 の オプ ジェ クト の イン スタ ンス か どう か 調べ る 
vagr flagg3 = myOb][1] tnstanceof Man: 
// 結果 を 出力 
ete.1nnerHTML += "myObj["+1+"] : Array 7? "+f1og1+"<br>": 
ete.tnnerHTML += "myOb]["+1+"] : Date 7? "+fLog2+" <br> " : 
ete.tnnerHTML += "myObJ["+1+"] : Man 2? "+flogg3+"<hr>"・ 
} 
// 自前 の オプ ジェ クト を 生成 する た め の ク ラス 
functton Man(name,qge){ 


thts .name = nQmWe: 
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生 王 ビ ヒロ T「 口 N- ロ ライ 還 オブ ジェ クト の イン スタ ンス を 調べ る 


thts .qge = QQge: 4 
} 
+。 faqlse): 


ブラ ウザ で index.html を 表示 する と 、 オプ ジェ クト が どの イン スタ ンス な の か を 調べ た 結果 が 
表示 され ます 。 





myObi[O] : 
myObi[O] : 
myObi[O] - 


myObi1] 
myOhbi1] : 
myObjl1] 





ブナ NHN^AJA に に FE に 4 ミド 








どの オブ ジェ クト か 5 ら 派生 し た の か 調べ る に は 
md 「instanceof」 演 算 子 を 使う 


TavaScript で は 、 多く を オブ ジェ クト と し て 扱い ます 。 あら か じ め 決 め ら れ た オブ ジェ クト 
か ら 生 成す る 以外 に 、 独自 に 作成 し た オブ ジェ クト を 生成 する こと も で きま す 。 生成 され 


た オブ ジェ クト が 、 どの よう な 種類 の オブ ジェ クト な の か を 調べ る に は 、「instanceof」 演 算 
子 を 使い ます 。 | typeof」 演 算 子 で は 型 が 返る だ け で 、 正 確 な 情報 は わか り ま せん 。 ま た 、 
「instanceof」 演 算 子 以外 に は 、 オブ ジェ クト の 「 constructor」 プロ パテ ィ を 使っ て 生成 
元 の オブ ジェ クト (内 容 ) を 確認 する こと も で きま す 。 





関連 項目 
指定 され た オプ ジェ クト を 継承 し て 新た な オブ ジェ クト を 生成 する ………… パ ドー p.9 ら 
WP パテ ディ の オー ナー が か どう が 全く MHMMert0260NEVP2MESVRbAeP37 は か ae が 4 p.114 
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LIE6 Chrome Safari 5 | Firefox 4 ! Opera11 | iOS 4 ! Android2 } WP」 


SsEE5TIUIN- 昌 つら 
オブ ジェ クト の 内 容 を 読み 出す 


ここ で は 、 オブ ジェ クト の 内 容 を 読み 出す 方 法 に つい て 解説 し ます 。 








5 HTML の コー ド (index.html) 
<!DOCTYPE html> 
コ <html> 
: <head> 
と <meta charset="utf-8"> 
や <tttte>Samplte</tttle> 
グ <Scrtpt src="]S/sqmple.]S"></scrtpt> 
ト </head> 
<body> 
<OUtDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


window.addEventLitstener("1oad", functton( ){ 
// 結果 を 入れ る 変数 を 用 意 
var data = "": 
// window オ ブ プ ジ ェ クト の 内 容 を 出力 
for(var 1 tn wtndow){ 
tryt 
datqa = datog+ ュ 1 + "= " エ window[1] + "<br>": 
+catch(e)} 
} 
// 結果 を 出力 
document . getELementsByTagName( "output")[9] . tnnerHTML = datg: 
}, foalse): 


ブラ ウザ で index.html を 表示 する と 、| window 」 オ ブ ジ ェクト の 内 容 が 表示 され ます 。 


console = [object] 

_ 孔 DEVTOOLBAR_ CONSOLE COMMAND デ 
| lobject 

document ニ [objcct Documentl 

styicMedia = [object StyicMedia] 


chentlnfonmation [object Navigator] 
cipboardData = [object DataTransfer] 
cioscd = false 

defaultStatns = 


event ニ [object MSEvemtOb]] 
maxConnecthonsPerServer ニ 2 
offscreemnBufering = auto 
onfocusin 王 nu 
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mm 王 ビ ビビ TI ロロ N- ロ 5 mw オブ ジェ クト の 内 容 を 読み 出す 


= 記 mlN 眠 オブ ジェ クト の 内 容 を 読み 出す に は 「for.…in」 文 を 使う 


オプ ジェ クト の 内 容 を 読み 出す に は 、| for..m」 文 を 使い ます 。 「for( 変 数 名 in オブ ジェ 
クト ) 」 と する と 、 オプ ジェ クト の プロ パテ ィ 名 が 1 つ ず つ 読 み 出さ れ ま す 。「 for.im」 文 で は 、 
オブジェ クト で | DontEnum」 属 性 ( 非 列挙 型 ) に な っ て いる も の は 読み 出す こと が で きま 
せん 。 |「 DontEnum」 属 性 は 、「 Objectcreate() 」 メ ノッ ド に よっ て オブ ジェ クト 生成 する と 
さき や 、| defineProperty () 」 メ ノッ ド や | defineProperties() 」 メ ソ ッ ド を 使っ て 後 か ら 設 定 
する こと が で きま す 。 これ ら の メソ ッ ド な ど で は 、 次 の 表 に 示す オブジェ クト の 属性 値 を 設 
定 す る こと が で きま す 。 オブ ジェ クト の プロ パテ ィ が 列挙 型 か どう か は 、|「 enumerable」 属 
性 で 指定 する こと が で きま す 。 

また 、 プラ ウザ に よっ て は オプ ジェ クト 内 容 を 読み 出す と エラ ー に な る 場合 が あり ます 。 
これ は 、| try..catch」 文 で 回 避 す る こと が で きま す 。 


オブ ジェ クト の 属性 値 


Writable 


















プロ パテ ィ に 書き 込み が で きる か どう か 。 「true」 な ら 書 
さき 込み 可 能 、| false | なら 不可 
列挙 可能 か どう か 。「for.……in」 文 で の 抽出 対象 に な る か 
Mi どう か 。 true」 な ら 列 挙 可能 、「false」 な ら 列挙 不可 


configurable 0 [true」 な ら 再 定義 可能 、「false」 


「in」 演算 子 を 使っ て プロ バテ ィ が ある か 調べ る 



















「in」 演 算 子 を 使う と 、 オプ ジェ クト に プロ パテ ィ が ある か どう か 調べ る こと が で きま す 。 
調べ る こと が で きる の は プロ パテ ィ と オプ ジェ クト で 、 メソ ッ ド は 対象 外 に な り ます 。 次 の 例 
で は 、「navigator」 オ プ ジ ェ クト に | geolocation」 が 含ま れる 場合 は 「 true」、 そう で な い 
場合 は | false」 が 変数 | Hag」 に 入り ます 。 


var flag = "geolocation" tn navtgator: 
な お 、| im 演算 子 は 、 プロ ト タ イ プチ ェ ー ン を た どっ て プロ パテ ィ が ある か どう か を 調べ 


ます 。 プロ パテ ィ が その オプ ジェ クト だ け に 存在 する る の か どう か (オー ナー か どう か ) を 調 
べ る に は 、| hasOwnProperty () 」 メ ソ ッ ド を 使い ます 。 





* オブ ジェ クト の プロ パテ ィ の 読み 出し ・ 書 き 込み 処理 を 設定 する ……… ド ドド p.102 
e オブ ジェ クト の プロ パテ ィ 一 覧 を 取得 する 上 上 Git いひ h 人 ワ ーー nco4 人 8 調 は し: p.110 
* プロ パテ ィ の オー ナー か どう か 調べ 








ナ Nh い NN EETTEKZEE 
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LIE6 』 Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS4 | Android2 ! WP 


紀 E 1 1 は N・ ロ 2 ら 


プロ ト タ イ プ ブ を 利用 する 





ここ で は 、 プロ ト タ イ プ を 利用 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<mmeta charset="utf-8"> 
<tttle>SampLe</t1tle> 
<SCrtpt src="]S/sample .]S "></SCPtDt> 
</head> 
<body> 
<ht> 指 定 し た 桁 で 区 切る </h1> 
< く OUtDut キ ></OutDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.aqddEventLtstener("toad" 。functton(){ 


ブ NTHNAJS EEEE に 248 


var ele = document.getEtementsByTagName( "output")[9] : 
// Number オ プ ジ ェ クト に n 桁 で 区 切る メソ ッ ド を 追加 
Number.prototype .numFormat = functton(separate){ 
// パラ メー タ が 省略 され た 場合 は 3 桁 こ と に する 
SeDarate = Separate || 3: 
// 結果 を 入れ る 
VaP n = "「: 
var Count = 0 の: 
// 数 値 を 文字 列 に 変換 
var str = new Strtng(thts): 
for (var 1=str.lLength-1: 1>=9: 1--)† 
n = Str.charAt(1) + n: 
COunt++: 
tf (((count % separate) == の) && (1 != の)) n = "。"+n: 
} 
Peturn ni: 
} 
// 数 値 を 文字 列 と し て 3 桁 で 区 切る 
var n = (12345678) .numFormat(): 
ele.tnnerHTML = n+"<br>": 
// 数 値 を 文字 列 と し て 4 桁 で 区 切る 
var n = (12345678) .numFormat(4): 
ele.tnnerHTML += n: 
+。 false): 
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gm 王 ロ TI 口 NN - ロ 2 6 m プロ ト タ イ プ を 利用 する 


ブラ ウザ で index.html を 表示 する と 、「 Number」 オ ブ ジ ェクト の | prototype」 に 指定 し た 桁 
数 で 区 切る メソ ッ ド を 追加 し 、 その メソ ッ ド を 使っ て 3 桁 と 4 桁 に 区 切ら れ ま す 。 


指定 し た 桁 で 区 切る 


12.345.678 
1234.5678 





= 記紀 =lIN 中 プロ ト タ イ ブ を 利用 する に は 「prototype」 を 使う 


JavaScript で は プロ パテ ィ や メソ ッ ド を 継承 する 際 に プロ ト タ イ プ の 仕組 み を 利用 し ま 
す 。 プロ ト タ イ プ は 各 オ ブ ジ ェクト に | prototype」 と いう 名 前 で 用 意 き され て いま す 。 ここ に 
プロ パテ ィ や メソ ッ ド 、 オブ ジェ クト を 設定 する と 継 さ れ た オブ ジェ クト に も 、 それ ら が 追 
加 ・ 定 義 さ れ ま す 。 た と えば 、「Object」 オ ブ ジ ェクト の 「 prototype」 に メソ ッ ド を 追加 すれ 
ば 、 Array や Function、 自前 で 作成 し た オブ ジェ クト で も 同じ メソ ッ ド を 利用 する こと が で 
きる よう に な り ま す 。 

継承 され た オブ ジェ クト で 同名 の プロ パテ ィ や メソ ッ ド が 定義 され た 場合 は 、 そ れ ら が 
優先 し て 処理 され ます 。 










関連 項目 
。 指定 され た オブ ジェ クト を 継承 し て 新た な オブ ジェ クト を 生成 する …… じ ひ ぴの p.92 
6 消 は の 和 が ナ o が 月 が 議 机 MA.74 人 大 rtakWURIV2G2N7KtM て が や p.114 





テ ナ NYHN^AJNA EE に EEE4 ミ Se 
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LIE6 』Chrome Safari 5 | Firefox 4 1 Opera 11 | iOS4 | Android2 !WP 





=1 ゴ FilmIN ョ レザ / 
プロ バテ ィ の 属性 値 を 設定 ・ 取 得する 


ここ で は 、 プロ パテ ィ の 属性 値 を 設定 ・ 取 得する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





ロ 
し レ 
n 
ゴ 
Lu 
カ 


<head> 





<rmetq Charset="utf-8"> 

<tttle>SqmpLe</t1t1e> 

<SCrtPt src="]s/sample.]S"></scrtDpt> 
</heqad> 


テ NYHM^NUS 


<body> 
<h1h> プ ロ パ ティ 値 の 取得 設定 </h1> 
<Ou モ Dut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd"。 functton()+ 
var ele = document.getELementsByTagName( "output")[9] : 
// お お も と の オプ ジェ クト に プロ パテ ィ を 設定 
// 0bject だ け に 設定 され る プロ パテ ィ 
0b]ect .money = 1999: 
// すべ て の オブ ジェ クト に 継承 され る プロ パテ ィ 
0bject.prototype .work = "書籍 出版 ": 
// オプ ジェ クト を 生成 
var company = { ngme : "C&R 研 究 所 ", gddress : "新潟 県 " }: 
// 新た な プロ パテ ィ に 書き 込み 
company.StartYear = "1991 年 7 月 ": 
// 新規 に オプ ジェ クト を 生成 
var myOb] = new Ob]ect(): 
// プロ パテ ィ を 読み 出し 
ele.tnnerHTML = "name プ ロ パ ティ : "+company .name+ "<br>": 
ele.innerHTML += "startYeanr プ ロ パ ティ ・"+COrmDany . StartYear+ "<br>": 
ele.innerHTML += "company.money プ ロ パ ティ ・"+COmpany . Oney+"<br>"・ 
ele.innerHTML += "0bject.money プ ロ パ ティ : "+0bject .money+"<br>": 
ele.tnnerHTML += "my0b}.money プ ロ パ ティ : "+my0b].money+"<br>": 
ete.tnnerHTML += "myOb}.work プ ロ パ ティ : "+my0bj.work+"<br>": 
ele.innerHTML += "company.work プ ロ パ ティ ・"+COmmDany .WOrk+"<br> "・ 
ele.tnnerHTML += "Math.work プ ロ パ ティ : "+Math .work+"<br>": 

+, false): 
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思 ビ ビ ピロ T「 口 N- ロ 2 ワ 7 w プロ バテ ィ の 属性 値 を 設定 ・ 取 得する 


ブラ ウザ で index.html を 表示 する と 、 プロ パテ ィ に 書き 込ん だ 内 容 が 表示 され ます 。 継承 さ 
れ た プロ パテ ィ は 内 容 が 表示 され ます が 、 そう で な い 場 合 は | undefined」 と 表示 され ます 。 


プロ パテ ィ 値 の 取得 プ 設 定 


name プ ロバ パティ: C&R 研 究 所 
startYear プ ロバ ティ : 1991 年 7 月 


company_money プ ロバ パティ: undefined 
Object money プ ロバ ティ : 1000 
myObj money プ ロバ ティ : undefined 
myObj_work ブ プロパティ: 書籍 出版 
company.work プ ロバ ティ : 書 整 出 版 
Math work プ ロバ パティ: 書籍 出版 





ーNHMNANIN SETIE に 42 ミ a 


還 請 請 請 識 請 還 プロ バテ ィ の 属性 値 を 設定 する に は [オブ ジェ クト 名 . プ ロバ ティ 名 = 内 容 | 
取得 する に は 「 オ ブ ジ ェクト 名 . プ ロ パ ティ 名 」 と する 


オブジェ クト の プロ パテ ィ に 内 容 を 設定 する に は 、| オブ ジェ クト 名 . プ ロ パ ティ 名 = 内 
容 」 の よう に 、「 =」 を 使っ て 代入 し ます 。 内 容 を 読み 出す 場合 に は 、| オブ ジェ クト 名 . プ ロ 


パテ ィ 名 」 に アク セス し ます 。 
オプ ジェ クト に 新た な プロ パテ ィ を 追加 する 場合 は 、| オブ ジェ クト 名 . 追 加 す る プロ パテ ィ 


名 = 内 容 」 の よう に し ます 。 ECMA Script 5th に 対応 し た ブラ ウザ の 場合 、「Object. 
create() 」 メソ ッ ド 、| ObjectdefineProperty 0) 」 メ ソ ッ ド 、| ObjectdefnePropertes() 」 
メソ ッ ド で プロ パテ ィ の 属性 を 設定 する こと も で きま す 。 これ に 関し て は 、 102 ペ ー ジ を 参照 
し て くだ さい 。 

オプ ジェ クト に プロ パテ ィ を 追加 する 際 、 継承 先 で も 使用 し た い の で あれ ば 、| オプ ジェ 
クト 名 .prototype. 追 加 す る プロ パテ ィ 名 = 内 容 」 の よう に し ます 。 
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LIE9 』Chrome 1 Safari 5 」 Firefox 4 1 Opera 11 | iOS4 1 Android2 1WP」 


BE 上 ビビ TIHN- ロ 2 ジロ 


オブ ジェ クト の プロ バテ ィ の 
読み 出し ・ 書 き 込 み 処 理 を 設定 する 


ここ で は 、 オブ ジェ クト の プロ パテ ィ の 読み 出し ・ 書 き 込み 処理 を 設定 する getter と setter に 
つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<etq Charset="utf-8"> 


<title>Somple</t1tte> 


テ ナ NTHVAJINS に まき ま EK4 ミ は 


<SCrtDt Src="]S/Sqmpte . ]S "></SCrtDt> 
</hegd> ' 
<body> 
<h1>setter/getter</h1> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 
wtndow.aqddEventLtstener("1oqgd" 。 functton(){ 
// オブ ジェ クト を 生成 
var company = { ngme : "C&R 研 究 所 ", gddress : "新潟 県 " }: 
// オプ ショ ン を 指定 し て 生成 
var myCompany = Ob]ject.create(company, { 
owner : { 
enumerabte : true, // 列挙 可能 。 for.. .in で 出る 
conftgurabte : true。 // 再 定義 可能 か どう か 
set: functton(value){ 
glert(" 設 定 内 容 は 「"+vatue+"」 で す "): 
__valtue = vglue: // 書き 込み 内 容 を 保存 
}, 
get : functton(){ 
glert(" 読 み 出 し た 内 容 : "+__vgtue): 
} 
} 
}): 
// オプ ジェ クト に 値 を 設定 
myCompany .Owner = "Tkeda"・ 
var ownerName = myCompany .Owner: 
+, faqlse): 
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m 呈 己 ロイ | ロト | - 口 2 日 m オブ ジェ クト の プロ パテ ィ の 読み 出し ・ 書 き 込み 処理 を 設定 する 


プラ ウザ で index.html を 表示 する と 、 書 き 込 み 内 容 が アラ ー ト ダイ アロ グ に 表示 され ます 。 こ 
の 処理 は 、 setter 側 で 行っ て いま す 。 











オブ ジェ クト の プロ パテ ィ の 読み 出し ・ 書 き 込み 処理 を 設定 する に は 
「Object.create()」「Object.defineProperty()」 メ ソ ッ ド な ど を 使う 


オブ ジェ クト の プロ パテ ィ の 読み 出し ・ 書 き 込 み 処理 を 設定 する に は 、| Objectcreate() 」 
メソ ッ ド 、「 ObjectdefineProperty () 」 メ ノッ ド 、|「 ObjectdefineProperties() 」 メ ノッ ド を 使 
いま す 。 

オブ ジェ クト の プロ パテ ィ で 「set」 に 関数 を 指定 する と 、 内 容 を 設定 する 際 に 呼び 出さ 
れ ま す 。 関数 に は 、 書き 込む 内 容 が 渡さ きれ ます 。 逆 に 内 容 を 読み 出す 場合 に は 、| get」 
に 関数 を 指定 し ます 。 


INRII に IE 












関連 項目 


e オブ ジェ クト の 内 容 を 読み 出す ……ti ド oo p.96 





ブーNYHWAJS EE に IE 4 ミ 
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LIE9 』Chrome 1 Safari 5 」 Firefox 4 1Opera11 | iOS5 | Android4 1 WP 


=1 ヨ mllmINa ョ レ に 
オブ ジェ クト の 変更 を 禁止 する 


ここ で は 、 オブ ジェ クト の 変更 を 禁止 する 方 法 に つい て 解説 し ます 。 











口 8 HTML の コー ド (index.html) 
NN <!DOCTYPE html> 
要 * <html> 
4 <head> 

ロ <rmetq charset="utf-8"> 

シ <tttte>Sampte</titte> 

ログ <Scrtpt src="]s/sqmple.]S"></scrtpt> 

"| head> 

ロ <body> 

<OUtDu キ ></OutDut> 
王 0 

の html> 
ーー 

ロ ' 

* JavaScript の コー ド (sample.js) 
1 wtndow.addEventLtstener("1ogd"。functton(){ 

| var ele = document.getEtementsByTagName( "output")[9]: 
ー // オプ ジェ クト を 作成 

り var myOb〕 = 1+ 

type : "N" 

ロ | }: 
ーー // オプ ジェ クト の プロ パテ ィ を R に 変更 

>| my0bj.type = "R": 
_」 // オプ ジェ クト を ロッ ク 

ご | 0bject.freezeCmy0b]): 
還 // オプ ジェ クト の プロ パテ ィ を X に 変更 

W my0b].type = "X': 


// オプ ジェ クト に プロ パテ ィ を 追加 

myOb].year = 1987: 

// type, year プ ロ パ ティ の 内 容 を 表示 する 

ete.tnnerHTML = "種類 は " + myObj.type + "/"+my0bj .year+" で す ": 
}, foqlse): 


引 
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生 王 ビ ピロ T| 口 N - 口 9 m オブ ジェ クト の 変更 を 禁止 する 


ブラ ウザ で index.html を 表示 する と 、| freeze() 」 メソ ッッ ド に よっ て ロッ ク さ れ て いる た め 、 変 
更 前 の プロ パテ ィ の 値 と | undefined」 が 表示 され ます 。 


種類 は Rundefned で す 





な お 、[freeze() 」 メ ソ ッ ド を 実行 し な い 場 合 は 、 次 の よう な 結果 に な り ま す 。 


種類 は 1987 で す 


mNIi ヨ mlNl 細 オブ ジェ クト を 保護 する に は 「freeze()」 メ ソ ッ ド を 使う 


TavaScript で は 、 オブ ジェ クト に プロ パテ ィ や メソ ッ ド を 簡単 に 追加 で きま す 。 また 、 プ 
ロ パ ティ の 値 も 自由 に 変更 する こと が で きま す 。 た だ し 、 この 手軽 さ が 問題 を 引き 起こ す 
こと が あり ます 。 そ こ で 、 オ ブ ジ ェクト が 不用 意 に 変更 きれ な いよ うに する に は 、| freeze いり 」 
メソ ッ ド を 使い ます 。 パ ラメ ー タ に は 、 内 容 を 変更 し た く な い オ ブ ジ ェクト を 指定 し ます 。 な お 、 
[freeze() 」 メ ノッ ド の 戻り 値 も 処理 し た オプ ジェ クト に な り ま す 。 


関連 項目 ゅ ゅ Il 


e プロ パテ ィ の 追加 を 禁止 する …eooeoeoeoeeoeeee p.106 
e オブ ジェ クト の 変更 ・ 拡 張 な ど が 可能 か 調べ る も …… ド ーー ドド ir p.108 








テ NYHN^AJISL SETIEE4Ss 


105 


LIE9 』Chrome 1 Safari 5 」 Firefox 4 | Opera 11 1 iOS 5 ! Android4 1 WP 


⑤ 反 501LIN- 口 コロ 


プロ バテ ィ の 追加 を 禁止 する 








ここ で は 、 プロ パテ ィ の 追加 を 禁止 する 方 法 に つい て 解説 し ます 。 





B HTML の コー ド (index.html) 
ー <!DOCTYPE html> 
= <html> 
4 <head> 
3 <meta Charset="utf-8"> 
ン <tttle>SampLe</tttte> 
ク <Scrtpt src="]s/sgmple.]S "></scrtpt> 
ト </heod> 
<body> 
< く OUtDu キ ></OU て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("1oqd"。 functton(){ 


var ele = document.getEtementsByTagName( "output")[9]: 
// オプ ジェ クト を 作成 


var myOb] = { 
type : "N", 
code : "bug" 
す : 


// オブ プ ジ ェ クト に プロ パテ ィ を 追加 
myOb].year = 1987: 
// オプ ジェ クト の プロ パテ ィ の 追加 を 禁止 
0b]ject .preventExtensions(my0b]}): 
// オプ ジェ クト に プロ パテ ィ を 追加 
myOb] .maker = "1rem": 
// オプ ジェ クト の プロ パテ ィ を R に 変更 
myOb〕 .type = "R': 
// オプ ジェ クト の code プ ロ パ ティ を 削除 
delete myOb] .code: 
// オプ ジェ クト の 内 容 を 表示 する 
for(var 1 tn myO0b}){ 
ele.tnnerHTML += モ エモ + "= ェ リ " ェ myObj[1]+"<br>": 

} 

}, false): 
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生 選 ピロ TI 口 N! - 口 ヨロ mw プロ パテ ィ の 追加 を 禁止 する 


ブラ ウザ で index.html を 表示 する と 、「preventExtensions ()) 」 メ ソ ッ ド に よっ て オプ ジェ クト 
へ の プロ パテ ィ の 追加 が 禁止 され て いる た め 、「maker」 プ ロ パ テイ は 表示 され ませ ん 。 


type 三 民 
year 三 198/ 





な お 、[「preventExtensions() 」 を 実行 し な い 場合 は 、 次 の よう な 結末 に な り ま す 。 


















プロ パテ ィ の 追加 を 禁止 する に は 


MDpreventExtensions()」 メ ソ ッ ド を 使う 


]avaScript で は 、 オプ ジェ クト へ の プロ パテ ィ の 追加 を 禁止 する に は 、| prevent 
Fxtensions() 」 メ ノッ ド を 使い ます 。 パラ メー タ に は 、 プロ パテ ィ を 追加 し た く な い オ プ ジ ェ 
クト を 指定 し ます 。 104 ペ ー ジ の よう に 、「freeze() 」 メ ノッ ド を 使っ て オプ ジェ クト 目 体 の 変 
更 を 禁止 する こと も で きま す が 、 これ で は 不便 な 場合 も あり ます 。 オブ ジェ クト の 新た な ブ 
ロ パ ティ の 追加 だ け を 禁止 し た い 場合 に は 、「preventExtensions() 」 メ ノッ ド の 方 が 便 
利 で す 。「preventExtensions() 」 メ ノッ ド を 実行 する と プロ パテ ィ の 追加 だ けが 禁止 さ 
れ 、 プロ パテ ィ の 内 容 の 変更 や 削除 は 自由 に 行う こと が で きま す 。 





関連 項目 
e オブ ジェ クト の 変更 を 禁止 する …… ド ドド Tr p.104 
e オブ ジェ クト の 変更 ・ 拡 張 な ど が 可能 か 調べ る も …… ド ドド oommmerrrrrr p.108 





テ NHNAUS に に ま M4 ミ は 
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4 画 


ナ NYHNANUS EEEK2 ミ Fm 
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LIE9 』Chrome 1 Safari 5 Firefox 4 1 Opera 11 1 iOS 5 Android4 | WP 


=1 コ mlmINBm に S 
オブ ジェ クト の 変更 ・ 拡 張 な ど が 可能 か 調べ る 


ここ で は 、 オプ ジェ クト の 変更 ・ 拡 張 な ど が 可能 か 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<meta charset="utf-8"> 
<t1 せ le>SqmpLe</t1t1e> 
<SCrtDpt Src="]S/sqmple.]S "></scrtpt> 
</head> 
<body> 
< く OUtDu キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventLtstener("1oad"。 functton(){ 
var ele = document .getEtementsByTagName( "output")[9] : 
// オプ ジェ クト を 作成 
var myOb] = { 
name : "MAPPY" 
}: 
// オプ ジェ クト の 状態 を 表示 
ele.1tnnerHTML = "tsExtensible ・: "+Ob]Ject.tsExtensible(my0b])+"<br> ": 
ele.tnnerHTML += "tsFrozen : "+0bject.tsFrozenCmy0b})+"<br>": 
ete.innerHTML += "tsSeqted : "+0bject.isSeqtedCmy0b])+"<hr>": 
// オプ ジェ クト を ロッ ク 
0bject.freeze(my0b]}): 
// オブ ジェ クト の 状態 を 表示 
ete.tnnerHTML += "isExtenstblte : "+0bject.tsExtenstble(my0b])+"<br>": 
ete.innerHTML += "tsFrozen : "+0bject.tsFrozenCmy0b])+"<br>": 
ete.tnnerHTML += "tsSeated : "+0bject.1sSeatedCmy0b}): 
}。 faqlse): 


mW 王 ピロ T| 品 トト N! - 口 コ ] 還 オブ ジェ クト の 変更 ・ 拡 張 な ど が 可能 か 調べ る 


ブラ ウザ で index.html を 表示 する と 、[ freeze() 」 メ ソノ ッ ド に よっ て ロッ ク す る 前 は オブ ジェ クト 
の 拡張 な ど が 可能 に な っ て いま す 。「 freeze() 」 メ ソ ッ ド の 実行 後 (区 切り 線 より 下 ) は オブ ジェ 
クト の 変更 が 禁止 され る た め 、 拡張 が で き な い こと を 示す 結果 に な っ て いま す 。 





多く の ブラ ウザ に 搭載 され て いる 新しい ]avaScript で は 、 不用 意 に オブ ジェ クト の 拡 
張 を 禁止 する 機能 が あり ます 。 オプ ジェ クト が 拡張 可能 か どう か は 、| isExtensible」 プ ロ 
パテ ィ で 確認 する こと が で きま す 。「 true」 な ら 拡 張 可 能 で 、| false」 な ら 拡 張 不可 で す 。 

同様 に 、 オ プ ジ ェ クト に プロ パテ ィ を 追加 ・ 削 除 、 お よび 、 値 の 変更 が 可能 か どう か 
は 、「isFrozen」 プロ パテ ィ で 確認 する こと が で きま す 。「true」 な ら 追 加 、 お よび 、 値 の 
変更 が 可能 、|false」 な ら 不 可 で す 。 また 、 プロ パテ ィ の 追加 ・ 削 除 が 可能 か どう か は 、 
「isSealed 」 プロ パテ ィ で 確認 する こと が で きま す 。「true」 な ら 追 加 が 可能 、| false」 な 
ら 不可 で す 。 

な お 、 オ ブ ジ ェクト の 拡張 が 禁止 され て いる 場合 に プロ パテ イィ を 追加 し て も 、 例 外 エ ラー 
な ど は 発生 し ませ ん 。 













関連 項目 ょ ぁ 


@ オブ ジェ クト の 変更 を 禁止 する が なお 6 US 宮寺 が が 知人 12 お ea 0 も D. 104 
@ プロ リ 【 テ ィ の 追加 を 禁止 する eS が: か 導入 1 6 e 2 た くす dd すま D. ] 6 





ナ NHVANIN EETE に 4 ェ ピ 
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LIE9 1 Chrome Safari 5 | Firefox 4 | Opera 11 | iOS 5 1 Android4 1 WP 


9 たま ETN- 人 ほう の 


オブ ジェ クト の プロ バ パティ 一 覧 を 取得 する 








ここ で は 、 オプ ジェ クト の プロ パテ ィ 一 覧 を 取得 する 方 法 に つい て 解説 し ます 。 





5 HTML の コー ド (index.html) 
<!DOCTYPE html> 
= コ <html> 
4 <heqd> 
4 <meta charset="utf-8"> 
ジ <tttle>SampLe</t1t1e> 
ク <Scrtpt src="]s/sample.]S "></scrtpt> 
ョ </head> 
<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . gddEventLtstener("1ogd" 。 functton(){ 
var ele = documert.getElementsByTagName( "output")[ の ] : 
// 配列 オプ ジェ クト を 作成 
var myOb] = [ "Android", 4 ]: 
// オプ ジェ クト の 内 容 を keys で 表示 
ele.tnnerHTML = " 圏 keys<br>": 
var Ltst1 = 0b]ject.keysCmy0b}): 
for(1= の : 1<ltst1.1ength: 1++){ 
ele.1tnnerHTML += ltst1[1]+" : " +myO0bj[]+"<br>": 
} 
// オプ ジェ クト の 内 容 を getOwnPropertyNomes で 表示 
ele.tnnerHTML += "<hr> 還 getOwnPropertyNames<br> ": 
var ltst2 = Ob]Ject.getOwnPropertyNames(my0b]}): 
for(1= の 9: 1<ltst2.1Length: 1++){ 
ele.1tnnerHTML += list2[1]+" : " +myObj[i]+"<br>": 
} 
}。 false): 
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mm ビ ロ TI ロ NN - 口 2 mw オブ ジェ クト の プロ パテ ィ イィ 一覧 を 取得 する 


プラ ウザ で indexhtml を 表示 する と 、 オ プ ジ ェ クト の プロ パテ ィ 一 覧 が 表示 され ます 。 「keys()」 
メソ ッ ド で は 列挙 刑 に な っ て いる プロ パテ ィ は 表示 され ませ ん が 、「getOwnPropertyNames() 」 
で は 列挙 型 を 含む すべ て の プロ パテ ィ が 表示 され ます 。 
















オブ ジェ クト の プロ パテ ィ 一 覧 を 取得 する に は 
[keys()」 メ ソ ッ ド と 「getOwnPropertyNames()」 メ ソ ッ ド を 使う 


TavaScript で オブ ジェ クト の プロ パテ ィ 一 覧 を 取得 する 場合 に は 、| for..in」 文 が 使わ 
れ て きま し た 。 現在 の ブラ ウザ で は 、 これ に 加え て |「 keys() 」 メ ソノ ッ ド と | getOwnProperty 
Names() 」 メ ノッ ド を 使っ て プロ パテ ィ を 取得 する こと が で きま す 。 これ ら の メソ ッ ド は 、 パラ 
メー タ で 指定 され た オプ ジェ クト の プロ パテ ィ 一 覧 を 配列 と し て 返し ます 。 

「keys() 」 メ ノッ ド で は 、 列挙 型 と な っ て いる プロ パテ ィ は 返さ れ ま せん 。 | getOwn 
PropertyNames() 」 メ ソ ッ ド で は 、 列挙 型 も 含め た プロ パテ ィ を 返し ます 。 


ロロ NEPO ロ INT 


関連 項目 
e オブ ジェ クト の 内 容 を 詩 み 出す … io p.96 
s オブ ジェ クト の プロ パテ ィ の 読み 出し ・ 書 き 込み 処理 を 設定 する …… mint p.108 





ブ NYHN^ANIS に に 4se 
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LIE6 1Chrome 』Safari 5 | Firefox 4 1 Opera11 1 iOS4 1 Android2 IwP」 





ら E じ 11HN- 口 ココ 
オブ ジェ クト の 種類 を 調べ る 


| ここ で は オプ ジェ クト の 種類 を 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<title>Sqmpte</tttte> 
<SCPr1Ppt src="]S/sample.]S"></scrtpt> 
</head> 
<body> 
<output></output> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener(C"1ogd" 。 functton()t 
var ele = document .getElementsByTagName( "output")[9] : 
// 配列 に 各種 オプ ジェ クト を 用 意 











| 


ナ NHW^NINAT 記 に ES 


レロ | 


日 | 


ら 


ラロ | 


| sgll zal 





| var my0bj = [ 

Array(1), Strtng(2), NumberC3), Dagte(), Math, RegExp, 
| functton() う 二 , nutt。 9.123, "OK" fatse, undefined 
5 wi 5 

ー // オプ ジェ クト の 種類 を 表示 
0 forCvar 1=9: 1<myOb].1engthi 1++){ 

" // 種類 を 調べ る 

di var type = typeof(my0b][1]): 

1 ele.1tnnerHTML += type+"<br>": 
_ } 

| +, false): 


112 


ms 選 ビ ビ TI ロロ NI- 口 ココ mw オブ ジェ クト の 種類 を 調べ る 


ブラ ウザ で index.html を 表示 する と 、 各 種 オ ブ ジ ェクト を 調べ た 結果 が 表示 され ます 。 な お 、 
[typeof | 演算 子 で は 、 どの オブ ジェ クト の イン スタ ンス な の か は 調べ る こと は で きま せん 。 





テ ナ NHN^AJS EEE に 4 ミ a 


mINI コ slimlNs 画 オブ ジ 調べ る に は 「typeof」 演算 子 を 使う 


]avaScript で オブ ジェ クト の 種類 を 調べ る に は 、「typeof」 演 算 子 を 使い ます 。 パ ラメ ー 
タ に 調べ た い オ ブ ジ ェクト や 変数 な ど を 指定 し ます 。 オプ ジェ クト の 種類 に 応じ て 、 次 の 
表 の 文字 列 が 返さ れ ま す 。 な お 、| typeof」 演 算 子 は 種類 を 返す だ け で あり 、 イン スタ ン 
ス が どの オブジェ クト か ら 生 成 さ れ た も の か を 把握 する こと は で きま せん 。 どの オプ ジェ クト 
の イン スタ ンス 化 を 調べ る 場合 は 、「instanceOfl 演 算 子 を 使う 必要 が あり ます 。 


各種 オブ ジェ クト ( 「null」 も 該当 ) 
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LIE6 』Chrome Safari 5 』 Firefox 4 Opera 11 | iOS4 』 Android2 1 WP」 


BE 上 ビビ TIUHN- ロ コイ 


プロ バテ ィ の オー ナー か どう か 調べ る 





上 ここ で は 、 指定 し た プロ パテ ィ の オー ナー か どう か 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<t1tle>Sampte</t1tte> 
<SCrtpt src="]S/sqmple.]S"></sCrtpt> 
</hegd> 
<OutDut></OutDUt> 
ーー Med 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . addEventLtstener("1ogd" 。 function(){ 
var ele = document.getELementsByTagName( "output")[9] : 
// 配列 オプ ジェ クト を 生成 
9 | var g = new Arrgay(1,2,3,4): 
// 新た な プロ パテ ィ を 追加 
Q.Ver = 2.5: 
ー // 追加 し た 新た な プロ パテ ィ で ある ver の 所 有 者 か 調べ る 
ele.tnnerHTML = "ver の オー ナー か ? :"+q.hasOwnProperty("ver")+"<br>": 
// tength の 所 有 者 か 調べ る 
ele.innerHTML += "1ength の オー ナー か ? :"+q.has0wnProperty("1ength")+"<br>": 
| // toString の 所 有 者 か 調べ る 
で ele.innerHTML += "toStrtng の オー ナー か ? :"+qg.hasOwnPropertyC"toString")+"<br>": 
9 // jotn の 所 有 者 か 調べ る 
* ele.tnnerHTML += "otn の オー ナー か ? :"+q.hasOwnProperty( "jotn")+"<br>": 
// in を 使っ て join の 所 有 者 か 調べ る 
ete.innerHTML += "jotn の オー ナー か ? :"+(C"otn" in go)+"<br>": 
+ す ,。 faqlse): 





テ NYHNAIN に に だま に 4 ミト 


ら 


| el| 


臼 


そ 
杜 王 ま 
ee 
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き ビ ロイ T| 口 NN - 口 ヨコ 4 mw プロ パテ ィ の オー ナー か どう か 調べ る 


ブラ ウザ で index.html を 表示 する と 、 配列 オブ ジェ クト の プロ パテ ィ に つい て 、 オー ナー か ど 
うか 調べ た 結果 が 表示 され ます 。 





ら 


jom の オー ナー か ? :trve 





テテ NYHN^NIA に に まこ に 4 ミ 


プロ パティ の オー ナー か どう か 調べ る に は 
「has0wnProperty()」 メソッド を 使う 

プロ パテ ィ の オー ナー か どう か 調べ る に は 、| hasOwnProperty ( 」 メ ソ ッ ド を 使い ます 。 
「hasOwnProperty() 」 は 各 オ ブ プ ジ ェ クト の メソ ッ ド と し て 用 意 き れ て お り 、 パラ メー タ に 
調べ た い プ ロ パ ティ 名 を 文字 列 で 指定 し ます 。 


ロロ NEPOHINT 


「hasOwnProperty() 」 メ ソ ッ ド は 、 オブ ジェ クト の プロ ト タ イ プチ ェ ー ン を た どっ て 調べ 
る こと は し ませ ん 。 この た め 、 純粋 に オプ ジェ クト が その プロ パテ ィ を 持っ て いる か どう か 
調べ る こと が で きま す 。 オプ ジェ クト が プロ パテ ィ を 持っ て いる 場合 は 「 true」、 そう で な 
い 場 合 は 「false」 を 返し ます 。 プロ ト タ イ プチ ェ ー ン を た どっ て 調べ る 場合 に は 「hasOwn 
Property () 」 メ ソ ッ ド で は な く 、「i」 演算 子 を 使い ます 。 





関連 項目 


e ぁ オブジェ クト の 内 容 を 読み 出す …… ド oririrtirtrtrtrt p.96 
ゅ プロ トド ト タイプ を 利用 きる mi や や 人 中 ドド p.98 
ぁ ぉ プロ パテ ィ の 記 性 値 を 設定 ・ 取 得する ……… ド ドド に ドド ドー p.100 
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LIE6 Chrome 1 Safari 5 | Firefox 4 』 Opera11 | iOS4 1 Android2 1WP」 


ー】 = 半 時 前 国 ! Na 昌 KC キー 


[Boolean」 オブ ジェ クト を 生成 する 





ここ で は 、| Boolean」 オ ブ ジ ェクト を 生成 する 方 法 に つい て 解説 し ます 。 





ロ HTML の コー ド (index.html) 
の <!DOCTYPE html> 
に <html> 
an <head> 
と <metq charset="utf-8"> 
ジ <tttle>Sqmple</t1tte> 
ク <SCPtDt src="]S/sqmple.]S"></SCrtpt> 
ト </head> 

<body> 

< く OUtDu キ ></OuUtDUt> 
</body> 
</html> 





JavaScript の コー ド (sample.js) 


window . addEventLtstener("1ogd"。functton(){ 
var ele = document.getElementsByTaqgName( "output")[9] : 
// 変数 ftag1 を Bootegn( 真 偽 ) オ プ ジ ェ クト と し て 生成 
var flag1 = new Boolegan(): 
// 変数 ftog2 を Bootean( 真 偽 ) オ プ ジ ェ クト で 値 を true に し て 生成 
var flag2 = new Boolean(true): 
// 結果 を 出力 
ele.tnnerHTML = flag1+"<br>"+flag2: 
+, fatse): 


ブラ ウザ で index.html を 表示 する と 、| Boolean 」 オ ブ ジ ェクト で 生成 され た 変数 の 結果 が 
表示 され ます 。 


msi 中 [Boolean] オ ブ ジ ェクト を 生成 する に は 「new Boolean()」 と する 


JavaScript で 真 偽 値 を 持つ オプ ジェ クト (| Boolean」 オプ ブ ジェクト) を 生成 する に は 、 
| new Boolean() 」 と し ます 。 パラ メー タ に 何 も 指 定 し な い 場 合 や 内 容 が 偽 (「false」) の 
場合 、 変数 は [| false 」 に な り ま す 。 パラ メー タ が 真 (| true」) の 場合 は [true | に な り ま す 。 
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LIE6 」Chrome 1 Safari 5 | Firefox 4 1 Opera11 | iOS4 | Android2 !WP 





=1 ゴ mMlmIN 旧 に 1= 
プロ バ パティ や オブ ジェ クト を 削除 する 


ここ で は 、 プロ パテ ィ や オプ ジェ クト を 削除 する 方 法 に つい て 説明 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<mieta charset="utf-8"> 
<tttle>Sqmp le</t1tle> 
<SCcPtDt src="]S/sqmple .]S "></SCr1Dt> 
</head> 
<body> 
<OuUtDut></OutDut><hr> 
<OutDut></OutDut><hr> 
<OutDut></OutDut><hP> 
<OutDut></OutDut><hr> 
<OutDut></OutDut><hP> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .qddEventListener("lLoad" 。 functton()1{ 
var ele = document.getElLementsByTagName( "output"): 
// オブ ジェ クト を 作成 
Var nyOb]={x : 1。y : 2。Z : 99j5 
// 内 容 を 表示 
forCvar 1 tn myOb}]){ ele[9] .1nnerHTML += エ 1 ュ + "= リ "+ ォ myObj[hi]+"<br>": 
// z プ ロ パ ティ だ け 削 除 
delete myOb].Z: 
// 内 容 を 表示 
forCvar 1 tn myOb}j){ ele[1] .1nnerHTML + エ 1 ュ + "= ェ リ ォ myObji]+"<br>": + 
// オプ ジェ クト を 削除 
myOb] = null: 
// 内 容 を 表示 。 オプ ジェ クト が な い の で 内 も 出力 され な い 
forCvar 1 tn myO0b}]){ ele[2] .1nnerHTML += エ エミ + "= ェ リ ェ myOb][1]+"<br>": 
// オプ ジェ クト を 新た に 作成 
var tempOb] = functton(){ thts.zz = 123: は : 
tempOb] .DrototyDe.Z = 3: 
var myOb] = new tempOb](): 
// 内 容 を 表示 
for(var 1 tn myOb]){ ele[3] .1nnerHTML += エ 1 ュ + "= ェ リ + myObj[1]+"<br>": 
// z, zz プロ パテ ィ を 削除 。 自分 自身 の プロ パテ ィ で ある zz し か 削除 で き な い 
delete myOb].Z: 
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司 ビビ ピロ 丁 | 口 N| - 口 6 mw プロ パテ ィ や オブ ジェ クト を 削除 する 


delete myOb].Zz: 4 
// 内 容 を 表示 
for(var 1 tn myOb]){ ele[4].tinnerHTML += エ モ + リ "= ェ " ェ myObj[1]+"<br>": 

}, foglse): 


ブラ ウザ で index.html を 表示 する と 、 作成 し た オプ ジェ クト の 内 容 と 、 削除 後 の 内 容 が 表 
示さ れ ま す 。 削除 3 きれ た オブジェ クト の 内 容 は 表示 され ませ ん 。 





4 男 


テ ナ NYHN^NIN EE ま EK に 4 ミド ma 

















オブ ジェ クト を 削除 する に は 「null」 を 代入 、 
mM 識 プロ バテ ィ を 削除 する に は 「delete」 演算 子 を 使う 


オプ ジェ クト を 削除 する に は 、|null」 を 代入 し ます 。 プロ パテ ィ を 削除 する に は 、「delete」 
演算 子 を 使い ます 。 た だ し 、| delete」 演 算 子 で どん な プロ パテ ィ で も 削除 で きる わけ で は あ 


り ま せん 。 目 分 目 身 が 持つ プロ パテ ィ の み 削 除 で き 、 プロ ト タ イ プチ ナチ ェ ー ン を た どっ て 返さ れ 
だ た プロ パテ ィ は 削除 され ませ ん 。 また 、| delete」 演 算 子 で は 「var | 宣言 し た 変数 を 削除 す 
る こと は で きま せん 。 





関連 項目 ょ ゅ 


全 2 半 0 プチ も 人 ド 22Ke 枯 24444r4206ANSTA2 1 か eec2tE2tTHe209720PMtekssk2271446 ARKRAEGARG2 04 p.90 
e 指定 され た オプ ジェ クト を 継承 し て 新た な オブ ジェ クト を 生成 する ……………… の …… D.92 
e プロ バテ ィ の 剛性 値 を 役 定 取得 する る いれ ロ 6 れい ei p.100 
ゅ ぃ オプ ジイ カト の 変 本 が 本 人 科 二 の em いい に トリ 60 人 ザ 0Y67L 20200 い 462 に CEtrt4vrtee2iec p.104 
e オブジェ クト の 変更 ・ 拡 張 な ど が 可能 か 調べ る 上 … ビ (へー…… (ドド ドド ーー ツー p.108 
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LIE6 』 Chrome 』 Safari 5 | Firefox 4 1 Opera11 | iOS4 I Android2 1WP 





ca お EE コト - し に し) 3 / 


配列 オブ ジェ クト を 生成 する 


ここ で は 、 配列 オプ ジェ クト を 生成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 


<retq charset="utf-8"> 





<tttle>Sqmpte</t1tte> 





<SCr1Dt Src="]S/sampte .]S "></sCrtDt> 
</heqd> 
<body> 


El ヨコ ヨ エ コマ ロコ 


<OutDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oad" 。 functton(){ 
var ele = document .getELementsByTagName( "output ")[9] : 
// 配列 を 作成 
Var myArray1 = new Array(): 
// 配列 要素 を 19 個 作成 
var myArray2 = new Array(10): 
// 配列 要素 を あら か じ め 代 入 し て 作成 
Var myArray3 = new Array("C"。"and"。"R" う : 
// 配列 要素 を あら か じ め 代 入 し て 作成 
var myArray3 = [19]: 
// 二 次 元 配列 を 作成 
var myArray4 = [[1.2],[3,4.5],[6,7,8,9]]: 
// 配列 の 内 容 を 出力 
ele.tnnerHTML = " 圏 配列 内 容 ": 
ele.tnnerHTML += "<br>myArray1 = "+myArray1 .toStrtng(): 
ele.1nnerHTML += "<br>myArray2 = "+myArray2.toStrtng(): 
ele.tnnerHTML += "<br>myArray3 = "+myArray3.toStrtng(): 
ete.tnnerHTML += "<br>myArray4 = "+myArray4.toStrtng(): 
ete.innerHTML += "<hr> 一 配列 の 長 さ ": 
ele.1nnerHTML += "<br>myArray1 = "+myArray1.1ength: 
ele.tnnerHTML += "<br>myArray2 = "+myArray2.1ength: 
ele.1nnerHTML += "<br>myArray3 = "+myArray3.1ength: 
ele.tnnerHTML += "<br>myArray4 = "+myArray4.1ength: 

}, fatse): 
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mw 王 ビ ビビ ピ TI ロ NI- 口 コワ m 配列 オブ ジェ クト を 生成 する 


ブラ ウザ で index.html を 表示 する と 、 生成 し た 配列 の 内 容 と 配列 の 長 さ ( 要 素 総 数 ) が 表 
示さ れ ま す 。 


myArray4= ニ 1.2.3.4.5.6.7.8.9 
本 2 の 長 さ 








mm 時 配列 を 生成 する に は 「new Array()」 や 「 日 」 を 使う 


TavaScript で 配列 を 生成 する に は 、「new Array () 」 と し て 配列 オプ ジェ クト を 生成 し 
ます 。 何 も パ ラメ ー タ を 指定 し な い 場 合 は 、 空っぽ の 配列 が 生成 され ます 。 avaScript 
で は 配列 要素 は 自動 的 に 調整 され る た め 、 あら か じ め 有 要素 数 を 指定 する 必要 は あり ま 
せん 。 それ で も 明示 的 に 要素 数 を 指定 する 場合 は 、「new Array(10)」 の よう に 数 値 の 
パラ メー タ を 1 つ だ け 指 定 し ます 。 この 場合 、 配列 要素 が 10 個 、 用 意 さ れ ま す 。 パラ メー 
タ が 複数 ある 場合 は 、 そ れ ら は 要素 と し て 代入 され ます 。 た と えば 、|new Array(10, 
20) 」 と し た 場合 、 最初 の 配列 要素 に 「10」 の 数 値 、 そ の 次 の 要素 に 「20」 の 数 値 が 入り 
まず す 。 

また 、[new Array() 」 と する 代わ り に 、| []」 と 記述 する こと も で きま す 。 ここ で 、| a = 
[10]」 と し た 場合 は 、|a = new Array(10)」 と は 動作 が 異な る 点 に は 注意 が 必要 で 
す 。「[」 を 使っ た 場合 、 指定 し た 内 容 の 数 に か か わら ず 、 すべ て 配列 の 要素 と し て 
代入 され ます 。 

配列 は 一 次 元 配 列 だ け で な く 、 入れ 子 に する こと で 二 次 元 配 列 な ど 、 多 次 元 配列 を 
生成 する こと が で きま す 。 

な お 、 新しい ブラ ウザ で は 配列 要素 の ビッ ト 数 を 固定 し て 生成 する こと が で きま す 。 こ 
れ に 関し て は 、 122 ペ ー ジ を 参照 し て くだ さい 。 


















関連 項目 ょ ゅ 


ド う 指定 し た ビッ ト 長 の 配列 を 生成 する か 4 きも あ W 生 は でも キ . 4 AikO ま SI4 も お D. ] の の 





| 作 こ に ま きこ に 4 こい 
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LChrome 』 Safari 5 』 Firefox 4 1 Opera11 | iOS4 】 Android2 」 


ら ED じ TIHN- 口 ヨコ 昌 


指定 し た ビッ ト 長 の 配列 を 生成 する 


ここ で は 、 指定 し た ビッ ト 長 の 配列 を 生成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<metq Charset="utf-8"> 
<t1ttle>Sqmpte</t1tle> 
<SCPtpt src="]S/sample.]S "></scrtDt> 
</hegd> 
<body> 
< ぐ OUtDut></OUt て DUt> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. addEventLtstener("1ogd" 。 functton(){ 

Var ele = document.getElementsByTagName("output")[9] : 
// デー タ を 入れ る 配列 を 用 意 
myArray = new Array(): 
myArray[9] = new Int8Array(12): // 符号 付き 8 ビット 長 配列 を 作成 
myArray[1] = new Utnt8Array(12): // 符号 な し 8 ピッ ト 長 配列 を 作成 
myArray[2] = new Tnt16ArrayC12):  // 符号 付き 16 ビ ッ ト 長 配列 を 作成 
myArray[3] = new Utnt16Array(12):  // 符号 な し 16 ビ ピット 長 配列 を 作成 
myArray[4] = new Int32Array(12):  // 符号 付き 32 ビ ッ ト 長 配列 を 作成 
myArray[5] = new Utnt32Array(12):  // 符号 な し 32 ビ ッ ト 長 配列 を 作成 
myArraqy[6] = new Ftogt32ArrayC12): // 浮動 小数 32 ビ ピット 長 配列 を 作成 
myArrgy[7] = new Ftoqt64ArrayC12): // 浮動 小数 64 ビ ピット 長 配列 を 作成 
// 値 を 代入 し 結果 を 表示 
ele.innerHTML = " 較 配 列 内 容 <br>": 
var n=[-32767。 -1, 9, 127, 128, 255, 32767, 32768, 65535, 2147483647, 99999999999, 9.1]: 
for(var ]= の 9: ]<myArray.1ength: ]+){ 

for(Cvar 1= の 9: 1t<n.Length: 1++){ 

myArray[]][1] = n[i]: 
ele.tnnerHTML += myArray[]]i] +"。": 

} 

ele.tnnerHTML += "<br>": 
} 

}, fatse): 


mn ヒロ TI 口 N - 口 日 m 指定 し た ビッ ト 長 の 配列 を 生成 する 


ブラ ウザ で index.html を 表示 する と 、 生成 し た 配列 の 内 容 が 表示 され ます 。 ビッ ト 長 が 制 
限 さ れ て いる た め 、 同じ 値 を 代入 し て も 異な る 結果 に な り ま す 。 


=.0 12 た ー128、 = も =1.0. = も =) = も 9 


1.255. 0, 127, 128, 255, 255. 0, 255, 255, 255. 0 

-32767, -1, 0, 127, 128, 255, 32767, -32768, -1, -1, -6145. 0. 

32769, 65535. 0, 127, 128. 255, 32767, 32768, 65535, 65535, 59391, 0. 

-32767, -1, 0, 127, 128, 255, 32767, 32768, 65535, 2147483647, 12157621891. 0 

4294934529, 4294967295, 0, 127, 128, 255, 32767, 32768, 65535, 2147483647, 1215752191.0, 
-32767, -1.0, 127, 128, 255, 32767, 32768, 65535, 2147483648, 99999997952. 0.10000000149011612, 
-32767, -1, 0, 127, 128, 255, 32767, 32768, 65535, 2147483647, 99999999888, 0.1, 





= 上 引 =l 応 画 ビッ ト 長 を 指定 し て 配列 要素 を 生成 する に は 「Typed Array」 を 使う 


]avaScript で は 、 配列 要素 に きま ざま な デー タ を 代入 する こと が で きま す 。 数 字 や 文 
字 列 だ け で な く 、 オブ ジェ クト も 代入 する こと が で きま す 。 し か し 、 用 途 に よっ て は 配列 要 
素 の ビッ ト 長 が 決ま っ て いる 方 が 便利 な 場合 が あり ます 。 た と えば 、 画像 処理 や オー ディ 
オォ の 注 形 処理 な ど で す 。 ]avaScript で は 「Typed Array」 と いっ て ビッ ト 長 さ を 固定 し 
て 配列 を 生成 する こと が で きま す 。 その 際 、 使 用 する 要素 数 を 指定 する 必要 が あり ます 。 
ビッ ト 長 を 指定 し て 生成 で きる 配列 は 、 次 の 表 に 示す も の に な り ま す 。 
オブ ジェ クト (コンストラクタ) 説明 
Int8Array 符号 付き 8 ビッ ト デ ー タ 
Uint8Array 符号 な し 8 ビッ ト デ ー タ 
Int16Array 符号 付き 16 ビ ッ ト デ ー タ 
Uint16Array 符号 な し 16 ビ ッ ト デ ー タ 
Int32Array 符号 付き 32 ビ ッ ト デ ー タ 
Uint32Array 符号 な し 32 ビ ッ ト デ ー タ 
Float32Array 浮動 小数 32 ビ ッ ト (IEEE754) 
Float64Array 浮動 小数 32 ビ ッ ト (IEEE754) 

また 、「ArrayBuffer」 オブ ジェ クト を 使っ て バイ ト 単 位 で 同一 の 配列 に アク セス する こと 
る で きま す 。 次 の 例 で は 、[「byteData2[0]」 に は [255」、| byteData2[1]」 に は | 127」 が 
人 入り ます 。 
















































// デー タ を 入れ る 配列 を 16 バ イト 分 用 意 
var buffer = new ArrayBuffer(16): 
byteData1 = new Uint16Array(buffer): 
byteData2 = new Utnt8Arraqy(buffer): 
byteDataq1[9] = 3Z767: 
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LIE6 』Chrome 」 Safari 5 | Firefox 4 | Opera 11 1 iOS4 | Android2 1 WP 」 


BE ビビ じ TI 品 NN - 口 9 


配列 同士 や 配列 要素 を 連結 する 


ここ で は 、 配列 同士 の 連結 、 お よび 、 配列 要素 を 連結 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 








<metaq charset="utf-8"> 


<tttte>Sqmplte</ttt1e> 





ee ヨコ エコ マロ ロ 


<SCrtDpt src="]s/sample .]S "></scrtDpt> 
</head> 
<body> 
<OUtDut></OuDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventListener("1ogd" 。 function(){ 





var ele = document.getElementsByTagName("output")[9] : 
// 配列 を 作成 
var myArray1 =["A"。 "BP。 "CV]: 
Var myArray2 = [PD"。 "ET。 PT。 "6 呈 ぉ 
var myArray3 = ["H"。" エ "]: 
// 配列 同士 を 連結 
Var myArray4 = myArray1.concat(myArray2, myArray3): 
// 配列 要素 を あら か じ め 代 入 し て 作成 
var myStr = myArray4.]otn("/"): 
// 配列 の 内 容 を 出力 
ele.itnnerHTML = " 較 配 列 内 容 ": 
ele.tnnerHTML += "<br>myArray1 = "+myArray1.toStrtng(): 
etle.1tnnerHTML += "<br>myArray2 = "+myArray2.toStrtng(): 
ele.tnnerHTML += "<br>myArray3 = "+myArray3.toStrtng(): 
ele.1nnerHTML += "<br>myArray4 = "+myArray4.toStrtng(): 
ele.tnnerHTML += "<br>myStr = "+myStr: 

}, false): 
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mm 王 ピ T| 口 N!|- 口 コ 9 mm 配列 同士 や 配列 要素 を 連結 する 


ブラ ウザ で index.html を 表示 する と 、 連結 する 前 の 配列 内 容 と 配列 同士 を 連結 し た 結果 、 
お よび 、 配列 の 各 要 素 を 特定 の 文字 で 連結 し た 結果 が 表示 され ます 。 


mW 西 ロ 2 内 容 

myArrayl1 ニ ABC 
lmyArray2ー ニ DEFG 

myArray3 三 日 I 

myArray オ = ニーABCJDEF.G.HLE 

mySr ニ AB/CDE 正 / 印 TI 


配列 同士 を 連結 する に は 「concat() 」 メ ソ ッ ド 、 
sm 配列 要 素 を 連結 する に は 「join()」 メ ソ ッ ド を 使う 


配列 同士 を 連結 する に は 、| concat( 」 メ ソ ッ ド を 使い ます 。 | concat() 」 メ ソ ッ ド は 配 
列 の メソ ッ ド と し て 用 意 き され て お り 、 パラ メー タ に 連結 し た い 配 列 を 指定 し ます 。 その 際 、 
複数 の 配列 を 指定 する と 、 指定 し た 順番 に 配列 が 連結 る され て いき ます 。 

配列 の 要素 を 特定 の 区 切り 文字 で 連結 し て 文字 列 に し た い 場 合 に は 、| join() 」 メ 
ソ ッ ド を 使い ます 。 配列 の 各 要 素 が |join」 メ ノッ ド の パラ メー タ に 指定 し た 文字 で 連結 
され ます 。「join ()) 」 メ ノッ ド の パラ メー タ を 省略 する こと が で き 、 その 場合 は |,」 (カン マ ) 
で 各 要 素 が 連結 され 文字 列 と し て 返さ れ ま す 。 | concat() 」 メ ソ ッ ド 、| join 0) 」 メ ソ ッ ド と 
も 、 配列 内 容 は 変化 し ませ ん (配列 は 非 破壊 ) 。 


mml 員 92IN FC で 高速 に 文字 列 を 連結 する 


すでに BAD ノ ウ ハ ウ で す が 、 TE6 な どの 古い IE で は 、|+」 記 人 号 を 使っ た 文字 列 の 連 
結 が 他 の プラ ウザ と 比べ て 格段 に 低速 で す 。 これ を 回 避 す る 方 法 の 1 つと し て 配列 に 
文字 列 を 入れ て お き 、 最後 に 「join() 」 メ ソ ッ ド を 使っ て 連結 する と いう 方 法 が あり ます 。 

IE9 な どの 新しい バー ジョ ン で は 、 文 字 列 連結 な ど は 全般 的 に 処理 が 高速 化 さ れ て お 
り 、 この ノウ ハウ は 役に立ち ませ ん 。 







関連 項目 ゅ ゅ 
e [String」 オ ブ ジ ェクト を 生成 する / 文 字 列 を 連結 する ………… ド ドー p.194 








Ei ヨコ エコ ママ ロロ 
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LIE6 」 Chrome Safari 5 』 Firefox 4 1 Opera11 1 iOS4 ! Android2 1WP_ 





=1 ゴ milmIN ョ と ma 
配列 要素 を 抜き 出す 


ここ で は 、 配列 要素 を 抜き 出す 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<SCrtDt src="]S/somptle.]S "></scrtpt> 
</heod> 
<body> 
< く OutDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow_.aqddEventLitstener("1oad", function(){ 
var ele = document.getElementsByTagName( "output")[9]: 
// 配列 を 作成 
WO 仙山 PDG 和義 
// 配列 か ら 3 番目 以降 の 要素 を 抜き 出す 
var data1 = myArray.Ssltce(2): 
// 配列 か ら 3<5 番 目 の 要素 を 抜き 出す 
var dato2 = myArray.sltce(2, 5): 
// 配列 か ら 3 番 目 一 最後 か ら 2 番 目 の 要 素 を 抜き 出す 
var dato3 = myArray.sLtce(2,。 -1): 
// 配列 の 内 容 を 出力 
ele.innerHTML = " 元 の 配列 内 容 :"+myArray .toStringO+"<br>": 
ele.tnnerHTML += "抽出 結果 1:"+dota1 .toString()+"<br>": 
elte.tnnerHTML += "抽出 結果 2:"+dgta2 .toStrtngO+"<br>": 
ele.innerHTML += "抽出 結果 3:"+dqta3 .toStrtng()+"<br>": 
+, fgqlse): 








生 司 ビ ロ ロ TI 口 NN- ロ イロ m 配列 要素 を 抜き 出す 


プラ ウザ で index.html を 表示 する と 、 元 と な る 配列 か ら 要 素 を 抜き 出し た 結果 が 表示 され 
ます 。 


元 の 配列 内 容 :ABCDETFG 
抽出 結果 1:CDEFG 

抽出 結果 2:CDE 

抽出 結果 3:CDEF 





ea ヨコ ヨ エ コマ ロロ 


mi ヨコ ml 正本 列 要素 を 抜き 出す に は 「slice()」 メ ソ ッ ド を 使う 


配列 の 特定 範囲 の 要素 を 抜き 出す に は 、|slice() 」 メ ノッ ド を 使い ます 。| shice0」 メ 
ソ ッ ド は 、 指定 する パラ メー タ の 数 と 値 に よっ て 異な る 動作 を し ます 。| slice() 」 メ ソ ッ ド に 
は 、 1 つ 、 また は 、 2 つの パラ メー タ を 指定 し ます 。 パラ メー タ は 、 配列 の 要素 を 示す 数 値 


に な り ま す 。「0」 が 配列 の 先頭 要素 を 示し 、「 -2] で あれ ば 最後 か ら 2 番目 の 要素 を し 
ます 。 


パラ メー タ が 1 つの 場合 は 、 指定 し た 要素 か ら 最 後 の 要 素 まで 抜き 出さ きれ ま す 。 パラ 
メー タ が 2 つの 場合 は 、 指定 し た 男 囲 の 要素 が 抜き 出さ れ ま す 。 | slice」 メ ソ ッ ド を 実 
行 す る と 、 抜き 出し た 結果 は 配列 で 返さ れ ま す (要素 は 参照 で な く コ ビー され る ) 。 その 
際 、 元 の 配列 要素 は 何 も 変 化し ませ ん (配列 は 非 破壊 ) 。 





関連 項目 
e 配列 要素 を 抽出 挿入 する …… ド oo 
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に きき Sv4 = 
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LIE6 』 Chrome 1 Safari 5 | Firefox 4 1 Opera 11 1 iOS4 | Android2 1 WP 


BEUDTIHN- ロ オイ 1 


配列 要素 を 抽出 ・ 挿 入 す る 


ここ で は 、 配列 要素 を 抽出 ・ 挿 入 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<metqa Charset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<SCrtpt src="]S/sqmpLe.]S "></scrtpt> 
</hegd> 
<body> 
<OUtDUut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.gddEventLtstener("1oad", function(){ 
Vqr ele = document.getEtementsByTagName( "output")[@] : 
// 配列 を 作成 
WOP -0MAPPGWE eo 
WP 欄間 
WO NVAPPGVG mA 。 BC 
9 義人 本 M 二 EROy 和 6 
WP 人 NVARGVSc 
// 3 番目 以降 の 要素 を 抜き 出す 
var daqtg1 = myArray1.spLtce(2): 
// 3 番目 か ら 3 つ の 要素 を 抜き 出す 
var datqZ = myArray2.spltce(2, 3): 
// 最後 か ら 3 つの 要素 を 抜き 出す 
var data3 = myArray3.SspLtce( -3): 
// 最後 か ら 2 番目 と 3 番目 の 要素 を 抜き 出す (抜き 出す 位置 が 最後 か ら 3 番目 で 、 そ こ か ら 2 つ 抜き 出す ) 
var dato4 = myArray4.splLtce(-3, 2): 
// 3 番目 か ら 3 つ の 要素 を 抜き 出し 、 3 番目 以降 に 新た な 要素 を 挿入 
vaqr dato5 = myArray5.spLice(2,。3,。 "W"。 "XX" "Y" "2 の の : 
// 配列 の 内 容 を 出力 
ele.tnnerHTML = "myArray1:"+myArray1.toStrtng(C)+"<br>": 
ele.tnnerHTML += "data1:"+data1 .toStrtng()+"<hr>": 
ele.tnnerHTML += "myArray2:"+myArray2.toStrtng()+"<br>": 
ele.1nnerHTML += "daqta2:"+datgZ2 .toString()+"<hr> ": 
ele.1tnnerHTML += "myArray3:"+myArray3.toString()+"<br>": 
ele.tnnerHTML += "datog3:"+dato3 .toString()+"<hr> ": 
ele.tnnerHTML += "myArray4:"+myArray4.toString()+"<br>": 


m 王 ビビ ロ T| 口 NN - ロ 4 ] m 配列 要素 を 抽出 ・ 挿 入 す る 


ele.tnnerHTML += "data4:"+data4 .toStrtng()+" <hr>": 思 人 
ele.tnnerHTML += "myArray5: "+myArray5.toStrtng()+"<br>": 
ele.tnnerHTML += "data5:"+dato5 .toStrtng( ): 

+。 false): 


ブラ ウザ で index.html を 表示 する と 、 変更 され た 元 の 配列 の 内 容 と 抽出 ・ 挿 入 し た 結果 
の 配列 が 表示 され ます 。 





myArray1:AB 
data1: じ CDE.FG 量 


myArray2: AB.F.G. 日 
data2:CDE 


| に きこ に 4=a 


ーー ーー ーーーーーーーーーー ツ ーーーーーーーーーーーーーーーーーーーーーーーーーーーー 一 


myAray3:ABCDE 
data3:F GH 





myArray4: AB.C.DE. 日 
data4:FG 


myAray5:AB.WXYZFGH 
data5:CDE 





=NImlNM 下 配列 要素 を 抽出 ・ 挿 入 す る に は 「splice()」 メソッド を 使う 


配列 要素 を 抽出 ・ 挿 人 する に は 、| splice ( 」 メ ソ ッ ド を 使い ます 。| splice() 」 メ ソ ッ ド 
は 、 元 の 配列 か ら 取 り 除 いた 結果 を 返し ます (結果 は 配列 で 返さ れる )。 また 、 元 の 配 
別 内 容 は 変更 され ます (配列 は 破壊 ) 。 た だ し 、| splice() 」 メ ソ ッ ド は 、 パラ メー タ の 数 な 
ど に よっ て 動作 が 変わ り ます 。 

まず 、 パラ メー タ が 1 つの 場合 は 、 指定 し た 位置 に ある 要素 か ら 最 後 の 要 素 まで を 元 


の 配列 か ら 取 り 除 きま す 。 また 、 パラ メー タ が 負数 の 場合 は 、 最後 の 要素 か ら 数 えた 位 
置 に な り ま す 。 た と えば 、| splice(-2) 」 で あれ ば 、 最 後 か ら 2 つ の 要素 が 取り 除 か れ ま す 。 
パラ メー タ が 2 つの 場合 は 、 要素 を 抜き 出す 男 囲 に な り ま す 。 最初 の パラ メー タ が 抜き 出 
す 位置 に な り ま す (負数 も 指定 可能 )。 2 番目 の パラ メー タ は 、 抜き 出す 要素 数 に な り ま す 。 
パラ メー タ が 3 つ 以 上 の 場合 は 、 要素 を 抜き 出し た 位置 に 新た な 要素 が 挿入 され ま 
す 。 これ は 「splice() 」 メ ソ ッ ド の 3 番目 以降 で 指定 され た 要素 が 順番 に 元 の 配列 に 挿入 
され ます 。 





内 記 当 三 引用 2 
細 痢 3 生 httk3400oH 23 板 22ke4 の 88 p.126 
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LIE9 」Chrome 」 Safari 5 | Firefox 4 1 Opera 11 | OS 4 1 Android2 1WP」 


5E 上 DTIHN- ロ オジ 


未 件 を 満た す 配 列 要素 を 調べ る 


ここ で は 、 条件 を 満た す 配 列 要 素 を 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<eta charset="utf-8"> 


<tttle>Sqmple</ttt1le> 





<SCPtDt src="]S/sqmpte.]S "></scrtDpt> 
</head> 
<body> 

<OutDu キ ></OutDut> 


EE コ ヨ エ ロコ マロ コロ 


</body> 
</html> 


1| JavaScript の コー ド (sample.js) 


ーー wtndow.qddEventListener("1oad"。 functton(){ 
var ele = document .getElementsByTagName( "output")[9] : 
// 配列 を 作成 
var myArray = [1, 2,。 3, 4。 5, 6, 7, 8, 9]: 
// 配列 要素 が 5 未満 か どう か 調べ る 
D var flgg1 = myArray.every(check): 
var flagZ = myArray.Somme(check): 
// 配列 か ら 偶 数 を 取り 除く 
Var qry = myArrgy.fttter(functtonCetlement, tndex, targetArray){ 
tf (element & 1){ 
return element: 
} 
} う : 
// 判断 する コー ル バ ッ ク 関 数 
functton checkCetlement, tndex, targetArray){ 
// 読み 出し た 要素 を 調べ る 
tf Celement < 5){ 
Peturn tPue: 
+elset 


return faqlse: 


} 

// 結果 を 出力 

etle.1nnerHTML = "every:"+flag1+"<br>"・ 

ele.tnnerHTML += "some:"+fLaqg2+"<br>"・ 

ele.1nnerHTML += "ftlter:"+aqry .toStrtng(): 
}, faqlse): 
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還 ビビ ロイ エ | 口 NN - ロ 4 2 m 条件 を 満た す 配 列 要素 を 調べ る 


ブラ ウザ で index.html を 表示 する と 、「every 0 」 メ ノッ ド と 「some (0 」 メ ソ ッ ド を 使っ て 、 配列 
要素 を 調べ た 結果 が 表示 され ます 。 その 後 、| ilter() 」 メ ソ ッ ド で 人 奇数 だ け を 抽出 し た 結果 が 
表示 され ます 。 


some: true 
flter: 13.57.9 










配列 要素 が 条件 を 満た し て いる か 調べ る に は 
「every()」 メソッド や 「some()」 メ ソ ッ ド を 使う 
配列 要素 が 条件 を 満た し て いる か どう か は 、「every (0 」 メ ソ ッ ド か 「some 0 」 メ ノッ ド 
を 使い ます 。 どちら の メソ ッ ド も パラ メー タ に は コー ル バ ッ ク 関 数 を 指定 し ます 。 コー ル バ ッ 
ク 関数 に は 、 パラ メー タ と し て 、 配列 要素 、 配列 要素 の 位置 、 対象 と な る 配列 が 渡さ れ 
ます 
「every() 」 は コー ル バ ッ ク 関 数 か ら の 戻り 値 が すべ て 「 true」 の 場合 、| true」 を 返し ま 
す 。 コー ル バ ッ ク 関 数 か ら の 戻り 値 が 「false」 の 場合 は 、 そ の 時 点 で | false」 を 返し ます 。 
「some() 」 は コー ル バ ッ ク 関 数 か ら の 戻り 値 が すべ て 「 false」 の 場合 、| false」 を 返し ま 
す 。 コー ル バ ッ ク 関 数 か ら の 戻り 値 が 「true」 の 場合 は 、 そ の 時 点 で | true」 を 返し ます 。 
また 、 条件 を 満た し た 配列 要素 だ け を 抽出 し た い 場 合 に は 、| 旬 ter() 」 メ ノッ ド を 使い 
ます 。 パラ メー タ に は 、 コー ル バ ッ ク 関 数 を 指定 し ます 。 コー ル バ ッ ク 関 数 に 渡さ れる パラ 
メー タ は 、「every() 」 メ ソ ッ ド や 「some () 」 メ ノッ ド と 同じ で す 。「 名 ter() 」 メ ソ ッ ド は 、 コー 
ル バ ッ ク 関 数 内 か ら |「return」 文 に よっ て 返さ れ た 要素 だ け を 新た な 配列 の 要素 と し ま 
す 。 な お 、[「 名 ter() 」 メ ノッ ド を 実行 し て も 元 の 配列 は 変化 し ませ ん ( 非 破 壊 )。 

















ロロ NEPUHINT 
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LIE9 』Chrome 1 Safari 5 | Firefox 4 1 Opera 11 | iOS4 | Android2 1WP 


BE 上 ば じ T11 口 N- ロ オヨ 


配列 要素 を 順番 に 処理 する 








ここ で は 、 配列 要素 を 順番 に 処理 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metg chgrset="utf-8"> 


<tttte>SampLe</tttle> 


EIC ココ ヨ エ ゴマ ロロ 


<SCr1Dt Src="]S/sqmple、]S "></scrtpt> 
</heqd> 
っ 6640. 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("togd"。 functton()} 
Var ele = document.getEtementsByTagName( "output")[9] : 
// 配列 を 作成 
var myArray = [1, 2, 4。 8, "ABC"。 "XYZ"。functton( う ] : 
// 配列 を 順番 に 処理 
myArrgy .forEgch(functtonCetement, index, targetArray){ 
// 読み 出し た 要素 の 順番 と 内 容 を 表示 
ete.tnnerHTML += index+" = "+element+"<br>": 
} う : 
+, false): 


プラ ウザ で index.html を 表示 する と 、 すべ て の 配列 要素 の イン デック ス 番号 と 内 容 が 表示 
され ます 。 


oo や ト う つう m 
6 


0 
1 
2 
3 
4 
ぅ 
6 


『 
8 
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m 王 ビビ TI ロロ N- ロ オヨ 配列 要素 を 順番 に 処理 する 


mmllNl 画 配列 要素 を 順番 に 処理 する に は 「forEach()」 メ ソ ッ ド を 使う 


配列 要素 を 順番 に 処理 する 場合 に は 、「 forEach() 」 メ ソ ッ ド を 使い ます 。 | for」 文 を 
使っ て 配列 を 処理 する こと も で きま す が 、| forEach() 」 メ ソ ッ ド の 場合 は 繰り 返し の た め 
の 変数 を 用 意 す る 必要 が あり ませ ん 。「forEach() 」 の よう な メソ ッ ド は 、 イテレータ ー と も 
呼ば れ ま す 。 また 、「 forEach() 」 メ ソ ッ ド の パラ メー タ に は 、 配列 要素 の 処理 を 行う 関数 
を 指定 し ます 。 この 関数 に は 「 要素 内 容 」| 参照 番号 」| 対象 と な っ て いる 配列 オプ ジェ 
クト 」 が 渡さ れ ま す 。 


「forPach() | メソ ッ ド に は 、 2 番目 の パラ メー タ も 指定 する こと が で きま す 。 2 番目 の パラ 
メー タ に は [| forEach() 」 メ ソ ッ ド で 呼び 出さ れる 関数 内 で 示さ れる this と な る オブ ジェ クト 


を 指定 し ます 。 
な お 、 古い ブラ ウザ で は [forEach() 」 メ ソ ッ ド は 実装 され て いま せん が 、 次 の URL に 
ある コー ド を 使う こと で 同様 の 機能 を 実装 する こと が で きま す 。 


https://developer.mozilla.org/ja/Core_JavaScript_1.5_RHeference/ 
Global_ Objects/Array/forEach 


miml 員 中 上 症 重複 し て いる 要素 を 排除 する に は 


配列 の 名 前 や 商品 名 な どの デー タ が 重複 し て 入っ て いる 場合 、 次 の よう に ハッ シュ 
(連想 配列 ) を 利用 する こと で 重複 し て いる 項目 を 排除 する こと が で きま す 。 次 の 例 で 
は 、「PC」[MZ」「FM」 の 3 つが 重複 し て に いま す が 、 プ ログ ラム を 実行 する と 、| PC」|MZ」 
[FM」 の 3 つ だ け に まとめ られ 表示 され ます 。 


















var ele = document.getEtementsByTagName("output")[9] : 
// 重複 し て いる 項目 が ある 配列 を 作成 
VGP WVAPPOV e PPPC、、 7。 RM PET。 PC 。 MZ 。 0 。 友 。 0 」: 
// 結果 を 入れ る 配列 を 作成 
var resultArray = [ ]: 
// 要素 の 数 だ け 繰 り 返 す 
for(var 1= の : 1<myArray .Length: 1++){ 
resultArray[myArray[1]] = true: 
} 
// 結果 を 出力 
for(var 1 tn resultArray){ 


ele.innerHTML += 1+"<br>": 





} 


関連 項目 


@ 繰り 返し 処理 ( リ ル ひ ツ ) に つい て 34 も が を な る たき p.54 
e 配列 要素 を 加工 する mr p.140 
e 配列 要素 を 前 方 また は 後方 か ら 処 理 する …1 ぐ じい ドド p.144 








ご 本 | に に 旧い *4 こ Fe 





LIE9 』 Chrome 1 Safari 5 | Firefox 4 1 Opera 11 | iOS4 」 Android2 1 WP 」 


BE ビビ T11 品 N- 口 人 人 4 


配列 要素 を 検索 する 


ここ で は 、 配列 要素 を 検索 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta chgrset="utf-8"> 


<tttle>Sqmp Le</t1t1e> 





<SCrtDt src="]S/sqmple.]S"></scrtpt> 
</hegd> 
<body> 

<OUtDu キ ></OutDut> 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("1ogd"。 functton(){ 


ea コ ヨ エ コマ ロロ 


var ele = document.getElementsByTagName( "output")[9] : 
// 配列 を 作成 
var myArray = ["Bastc"。 "ルビ "。 "ADA"。 "ルビ ピ "。 "ルビ"。 "Bostc"。 "ルビ ピ ",。 "Per1"]: 
// 配列 を 先頭 か ら 後方 に 検索 
var tdx1 = myArray.1ndexO0fC" ル ビ "): 
// 配列 を 3 番目 の 要素 か ら 後 方 に 検索 
var tdx2 = myArray.tndexO0fC" ル ビ ", 2): 
// 配列 を 最後 か ら 前 方 に 検索 
var idx3 = myArray.tastIndex0fC て "ルビ"): 
// 配列 を 最後 の 3 番目 か ら 前 方 に 検索 
var idx4 = myArray.1qstTndex0fC て "ルビ ",-3): 
// 結果 を 出力 
ele.tnnerHTML = "1dx1:"+itdx1+ "<br> "・ 
ele.tnnerHTML += "1dx2:"+i1dx2+"<br> ": 
ele.tnnerHTML += "1dx3:"+1dx3+"<br> "・ 
ele.tnnerHTML += "1dx4:"+1dx4: 
+,。 faqlse): 
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還 王 ピロ T| 口 山 - ロ イス 4 mW 配列 要素 を 検索 する 


プラ ウザ で index.html を 表示 する と 、 配列 要素 を 検索 し た 結果 が 表示 され ます 。 


配列 要素 を 検索 する に は 
[indexOf()」 メ ソ ッ ド や 「lastlndexOf()」 メ ソ ッ ド を 使う 


INI コ HImII に 妥 


配列 要素 を 前 方 か ら 検索 す る に は 、|「indexOf() 」 メ ソ ッ ド を 使い ます 。 これ は 、 文字 
列 の 検索 に 使わ れる 「indexOf() 」 メソッド と 似 て いま す 。 最初 の パラ メー タ に 、 要素 の 
内 容 を 指定 し ます 。 該当 する 要素 が 見 つか っ た ら 、 その 要素 の 位置 を 返し ます 。 要素 


が 見 つか ら な か っ た 場合 は 、「-1」 を 返し ます 。「indexOf() 」 メ ソ ッ ド の 2 番目 の パラ メー 
タ は 、 省略 する こと が で きま す 。 指定 し た 場合 は 、 指定 し た 位置 か ら 要 素 の 検索 を 行い 
ます 。 位置 が 配列 要素 より も ゎ ふ 大 きい 場合 に は 、「-1」 を 返し ます 。 位置 に 負数 を 指定 し た 
場合 は 、 後方 か ら の 位置 を 示し ます 。 

配列 要素 を 後方 か ら 検索 する 場合 は 、「lastIndexOf() 」 メ ノッ ド を 使い ます 。 パラ メー 
タ は 「indexOf() 」 メ ノッ ド と 同じ で す 。 

な お 、 古い ブラ ウザ で は 「indexOf() 」 メ ソ ッ ド と 「lastIndexOf(O 」 メ ノッ ド は 実装 され て 
いま せん が 、 次 の URL に ある コー ド を 使う こと で 同等 の 機能 を 実装 する こと が で きま す 。 


https://developer.mozilla.0rg/ja/JavaScript/Heference/ 
Global_ODbjects/Array/indexOf 


https://developer.mozilla.0rg/ja/JavaScript/Reference/ 
Global_Objects/Array/lastlIndexOf 





関連 項目 


e 文字 列 を 検索 する p.200 
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LIE6 』 Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS4 I Android2 1 WP 


=1 ゴ PalmINBm と に 
配列 か が どう か 調べ る 


ここ で は 、 配列 か どう か 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<t1tte>Sqmpte</t1it1e> 
<SCrtpt src="]S/sqmple.]S"></scrtpt> 
</hegd> 
<body> 
< く OUtDut キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


window.qddEventLtstener("Logd" functtonC){ 
var ele = document.getElementsByTagName("output")[@] : 
// 配列 を 作成 
Var myArray1 = new Array(): 
// 配列 を 作成 
var myArragy2 = ["q-Ray"] : 
// オプ ジェ クト を 作成 
Var myOb]ject = new 0b]ject(): 
// 配列 か どう か 調べ る 
var flgg1 = Array.1sArray(myArray1): 








var flog2 = Arrgay.1tsArray(myArray2): 

var flag3 = Array.tsArray(myObject): 

var flgg4 = myArray1 tnstanceof Array: 

var flag5 = myArray2 instanceof Arrayi 

var flgg6 = myObject tnstanceof Array: 

// 結果 を 出力 

ele.innerHTML = "(1) myArrgy1 = "+flag1+"<br>": 

ele.innerHTML += "(2) myArray2 = "+fLog2+"<br>": 

ele.innerHTML += "(3) myObject = "+flgg3+"<hr>": 

ele.innerHTML += "(4) myArray1 = "+flag4+"<br>": 

ete.innerHTML += "(5) myArray2 = "+flag5+"<br>": 

ele.innerHTML += "(6) myObject = "+flqg6+"<br>": 
}, false): 


還 王 ビ ロ 丁 | 口 - ロ オイ 5 m 配列 か どう か 調べ る 


ブラ ウザ で index.html を 表示 する と 、 配列 か どう か 調べ た 結果 が 表示 され ます 。 


(1) myArray1 = true 
(2) myArray2 = truc 
| (3) myObject = false 


( 和 myArray] truc 
( ゝ ) myArray2 = iruce 
(6) myObject = false 





配列 か どう か 詩 
「instanceof」 演算 子 や 「Array.iSArray()」 メ ソ ッ ド を 使う 
]avaScript で は 配列 か どう か 調べ る に は 、|instanceof」 演 算 子 を 使う 方 法 と | Array. 
jsSArray() 」 メ ソ ッ ド を 使う 方 法 が あり ます 。| ArrayisArray ()」 は IE9 以 降 で 使用 で きる 
の で 、 それ 以前 の バー ジョ ン で 動作 させ る 場合 は |instanceof」 演 算 子 を 使い ます 。 どちら 
も 配列 の 場合 は | true」 を 、 そう で な い 場 合 は | false」 を 返し ます 。 
な お 、 古い ブラ ウザ で は 「isArray( 」 メ ソ ッ ド は 実装 され て いま せん が 、 次 の URL に あ 
る コー ド を 使う こと で 同等 の 機能 を 実装 する こと が で きま す 。 
https://developer.mozilla.0rg/ja/JavaScript/Reference/ 
Global_UDjectS/Array/ISArray 


ロロ NEPO ロ INT 


Ei ココ ヨ エ コマ ロコ 





内 放 下 三 還 必 
と 3 数 値 か どう か 調べ る ナン を p.80 
e オブ ジェ クト の 種類 を 調べ る の (io p.112 
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LIE6 」Chrome 1 Safari 5 | Firefox 4 ! Opera 11 1 iOS4 1 Android2 1WP 


BEUTIUHN- ロ 4 オ 46 


配列 要素 の 総数 を 求め る 


ここ で は 、 配列 要素 の 総数 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 


<tttle>Sqmplte</t1t1e> 











| に に まきこ 4 ミト 


<SCr1Pt src="]S/sample.]S "></scrtpt> 
</head> 
<body> 
<OutDut></Out て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. aqddEventListener("1ogd"。 functton(){ 
var ele = document .getElLementsByTagNgme( "output")[9]: 
// 生成 数 を 指定 し て 配列 を 作成 
var myArray1 = new Array(10): 
// 配列 を 作成 
var myArray2 = new Array(19, 20): 
// 配列 を 作成 
var myArray3 =["H"。 "He"」。"L1"]: 
// 配列 の 数 を 求め る 
var n1 = myArray1 .1ength: 
var nZ = myArray2. Length: 
var n3 = myArray3.1ength: 
// 結果 を 出力 
ele.tnnerHTML = "myArragy1 の 要素 数 : "+n1+"<br>"・: 
ele.tnnerHTML += "myArray2 の 要素 数 :"+n2+"<br>": 
ele.itnnerHTML += "myArray3 の 要素 数 :"+n3: 
}, foalse): 


ブラ ウザ で index.html を 表示 する と 、 それ ぞ れ の 配列 要素 の 総数 が 表示 され ます 。 


myAray1 の 要素 数 : 10 
myArray2 の 要素 数 :2 
myAray3 の 要素 数 :3 
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mW ビ ロイ | 口 届 - ロ ス 46 wm 配列 要素 の 総数 を 求め る 


simlsm 下 配列 の 要素 数 を 調べ る に は 「length] プロ バテ ィ を 使う 


]avaScript で は 配列 の 総数 を 調べ る に は 、「length] プ ロ パ ティ を 参照 し ます 。 配 列 の 
「length」 プロ パテ ィ は 読み 出し だ け で な く 、 次 の よう に サイ ズ を 指定 し て 設定 する こと も 
で きま す 。 





var ele = document.getEtementsByTagName( "output")[9]: 
// 空っぽ の 配列 を 作成 

var myArray = [ ]: 

// 配列 の 数 を 設定 する 

myArray.Length = 109: 

// 結果 を 出力 

ele.innerHTML = "myArray の 要素 数 :"+myArray . tength+"<br>": 
// 配列 の 15 番 目 に 代入 Gindex は 14) 

myArray[14] = true: 

// 結果 を 出力 

ele.innerHTML += "myArray の 要素 数 : "+myArray .1ength+"<br>": 


ml 肖 中 いい 理想 丁 外 も 訪 め た 要素 数 を 求め る に は 


配列 オブ ジェ クト の 「length」 プロ パテ ィ は 、 添え 字 ( 数 値 ) で 指定 され る 配列 の 要素 
数 を 返し ます 。 し か し 、 連想 配列 (ハッシュ) も 含め た 要素 は 対象 外 で す 。 連想 配列 も 含 
め た 要素 数 を 求め る に は 、 次 の よう に 「for..in」 文 を 利用 し ます 。 





















var ele = document .getElementsByTagName( "output") う [9] : 
// 配列 を 作成 6 要素 ) 

var myArray = ["A"。 "B"。 7C"。1。 2, 3]: 

// 配列 を ハッ シュ と し て 使用 

myArray["MZ"] = 799: 

myArray[ "PC"] = 6991: 

myArray[ "FM"] = 7: 

// ハッ シュ も 含め て 要素 数 を 求め る 

Var Count = の : 

forCvar 1 tn myArray){ count++: } 

// 配列 の 数 を 表示 

ele.innerHTML = "myArray の 要素 数 :"+myArray .tength+"<br>" 
ele.innerHTML += "myArray の 総 要素 数 : "+count+"<br>": 





















| 全 こ に 旧い に 4 こ ト 
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LIE9 』Chrome 1 Safari 5 Firefox 4 』 Opera11 1 iOS4 1 Android2 1 WP 


5EUTIUHN- ロ オプ 


配列 要素 を 加工 する 


ここ で は 、 配列 要素 を 加工 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 


<rmetq charset="utf-8"> 





<t1tle>SqmpLe</t1t1e> 
<ScPtpt src="]S/sqmple .]S "></scrtpt> 
</head> 


に に きこ に 4Se 


<body> 
<OUtDut キ ></OutDUut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .addEventLtstener("1oaqd" functton(){ 
var ele = document.getEtementsByTagName("output")[9] : 
// 配列 を 作成 
Vor myArray = [98, 198, 498, 989] : 
// 配列 を 順番 に 処理 
Var qry = myArray.map(functton(Celement, index, taqrgetArray){ 
// 読み 出し た 要素 に 「 円 」 の 文字 を 末尾 に 追加 
return etement+" 円": 
}): 
// 結果 を 出力 
ete.innerHTML = " 圏 元 の 配列 <br>"+myArray .toStringC)+"<br>": 
ele.innerHTML += " 較 処 理 し た 配列 <br>"+ary .toString(): 
},。 faqlse): 


プラ ウザ で index.html を 表示 する と 、 要素 の 末尾 に 「 円 」 の 文字 を 追加 し た 結果 が 表示 さ 
れ ま す 。 





画 フ LO の 本 2.| 
98.198 498 980 

| m 処 理 し た 配列 
98 円 198 円 .498 円 980 円 
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必 呈 ビビ ロ TI ロト N!|- ロ イワ wm 配列 要素 を 加工 する 


mNImlS 画 配列 要素 を 加工 する に は 「map()」 メ ソ ッ ド を 使う 


配列 要素 を 加工 する に は 、「map () 」 メ ノッ ド を 使い ます 。「map () 」 メ ノッ ド の パラ メー 
タ は 、 2 つ あ り ま す 。 最初 の パラ メー タ に は 、 コー ル バ ッ ク 関 数 を 指定 し ます 。 2 番目 の パラ 
メー タ に は 、 コ ー ル バッ ク 関 数 内 で | this」 と し て 使用 する オブ ジェ クト を 指定 し ます 。 な お 、 
2 番目 の パラ メー タ は 省略 する こと が で きま す 。 

コー ル バ ッ ク 関 数 に は 、 3 つの パラ メー タ が 渡さ れ ま す 。 最初 の パラ メー タ は 配列 の 要 
素 、2 番 目 の パ ラメ ー タ に は 要素 の 位置 、3 番 目 は 操作 対象 の 配列 に な り ま す 。「map り ] 
メソ ッ ド で は 、 1 つ ず つ 要 素 を コー ル バ ッ ク 関 数 に 渡し ます 。 コー ル バ ッ ク 関 数 内 で は 妥 
素 1 つ だ け の 処理 を 行い 、 結果 を | return] 文 で 返し ます 。 

[map() 」 メ ノッ は 、 す べ て の 要素 を 処理 し た 結果 を 新しい 配列 で 返し ます 。 そ の 際 、 
元 の 配列 内 容 は 何 も 変化 し ませ ん ( 非 破壊) 。 

な お 、 古い ブラ ウザ で は 「map () 」 メ ソ ッ ド は 実装 され て いま せん が 、 次 の URL に ある 
コー ド を 使う こと で 同等 の 機能 を 実装 する こと が で きま す 。 


https://developer.mozilla.org/ja/JavaScript/Reference/ 
Global_UDjectS/Array/map 
















関連 項目 





e 配列 要素 を 順番 に 処理 する ……… ド パ …… et21 arAMICUDA4YDCO 08232 





に まき こ に に 45 
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LIE6 」Chrome 1 Safari 5 Firefox 4 1 Opera11 1 iOS4 」 Android2 1WP_ 


ご 1 = 是 宰 関 昌 有田 ピ スニ 


配列 要素 を 追加 ・ 削 除 す る 


ここ で は 、 配列 要素 を 追加 ・ 削 除 す る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<retq charset="utf-8"> 


<tttle>SampLe</t1ttle> 





<SCrtDt src="]S/sample.]S "></scrtpt> 
</head> 
<body> 
<OUtDu キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . addEventLtstener( "Logd" 。 functton(){ 
var ele = document.getEtementsByTaqgName( "output")[9]: 
// 配列 を 作成 
var myArray = ["system"。 "code"。 "bug"]: 
// 末尾 の 配列 要素 を 取り 出す 
var ttem = myArray.DOD(): 
// 結果 を 出力 


ele.innerHTML = "ttem:"+ittem+"<br>": 


| 全 こ に きこ に 4 ミト em 





ele.1nnerHTML += "myArray: "+myArray+"<hr>": 
// 配列 の 末尾 に 要素 を 追加 する 
var n = myArray.Push("newcode"。 "enbug"): 
// 結果 を 出力 
ele.1nnerHTML += "ni"+n+"<br>"・ 
ele.tnnerHTML += "myAnrray:"+myArray: 

+, faqlse): 


ブラ ウザ で index.html を 表示 する と 、 配列 の 末尾 の 要素 を 取り 出し た 結果 と 、 その 後 、 配 
列 末尾 に 要素 を 追加 し た 結果 が 表示 され ます 。 


myArray: system.code.newcode.cnbug 
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m ビ ヒロ 丁 | 口 N - 口 4 日 配列 要素 を 追加 ・ 削 除 す る 


5 BE 列 の 未 尾 に 要素 を 追加 する に は 「push0」 メ ソ ッ ド 、 
未 尾 の 要素 の 削除 を 行う に は 「pop()」 メ ソ ッ ド を 使う 


配列 に 新た な 要素 を 追加 する に は 、「push() 」 メ ソ ッ ド を 使い ます 。「pushU」 メ ソ ッ ド 
の パラ メー タ に は 、 末尾 に 追加 し た い 要 素 を 指定 し ます (複数 指定 可能 )。 |pushU」 メ 


ソ ッ ド は 、 追加 され た 要素 も 含め た 配列 要素 数 を 返し ます 。 
配列 の 末尾 か ら 要 素 を 取り 出す に は 、「pop () 」 メ ノッ ド を 使い ます 。 取り 出さ れる の は 
最後 の 要素 1 つの だ け で す 。 | pop () 」 に は パラ メー タ は あり ませ ん 。 


mm 中 四半 仕 の 位置 に 要素 を 追加 する に は 


TavaScript で は 、 配列 の 任意 の 位置 (イン デック ス ) に 要素 を 追加 する こと が で きま 
す 。 その 際 、 配列 の サイ ズ を 調整 する 必要 は あり ませ ん 。 自動 的 に ブラ ウザ 側 で サイ ズ 
が 調整 され ます 。 また 、 次 の よう に 位置 (イン デック ス ) を 指定 し た 場合 と ハッ シュ (連想 
配列 ) を 指定 し た 場合 で は 、 読み 出し 方 法 が 異な る (配列 サイ ズ も 異な る ) の で 往 意 が 
必要 で す 。 




















var ele = document.getELementsByTagName( "output")[9]: 
// 配列 を 作成 

var myArray =[ ]: 

// 要素 を 任意 の 場所 に 追加 

myArray[14] = “Up: 

myArray[39] = "Down": 

myArray[ "Quark"] = "RGB Color": 

// 配列 の 内 容 を 出力 

ele.tnnerHTML = " 田 配 列 内 容 <br>"+myArray .toStrtngC)+"<br>": 

// for.. .in で 出力 

forCvar 1 tn myArray){ ele.tnnerHTML += myArray[1] + "<br>"i} 


関連 項目 


e 配列 要素 内 容 を 前 方 / 後 方 に ずら す oon ・ 人 条 IK p.149 





| 人 に 上 こ 4 ミト ea 
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ca 蛋 ヨコ エコ マロ ロ 


LIE9 』Chrome 1 Safari 5 | Firefox 4 Opera11 1 iOS4 | Android2 1 WP 」 


=1 ゴ milmINBm と = 
配列 要素 を 前 方 また は 後方 か ら 処 理 する 


ここ で は 、 配列 要素 を 前 方 、 ま た は 、 後方 か ら 処理 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<meta charset="utf-8"> 
<t1tte>Sqmp le</tttle> 
<SCrtDt src="]S/saqmple.]S "></scrtpt> 
</hegd> 
<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . qaddEventLtstener("1oqd" 。 functton(){ 





var ele = document.getEtLementsByTagName( "output")[9]: 
// 配列 を 作成 
0 - 便 の 本 計れ 生か WS 本 0e 馬 2H2 
// 配列 を 前 方 か ら 順 番 に 処理 
var qry1 = myArray.reduce(connect): 
// 初期 値 を 指定 し て 配列 を 前 方 か ら 順番 に 処理 
var qry2 = myArray.reduce(connect。" 護 "): 
// 配列 を 後方 か ら 順 番 に 処理 
Var ary3 = myArrgy .reduceRtght(connect): 
// 結果 を 出力 
ele.innerHTML = "還元 の 配列 <br>"+myArray .toStringC)+"<br>": 
ete.tnnerHTML += " 較 処 理 し た 配列 1<br>"+qry1.toStrtng()+"<br>": 
ete.innerHTML += " 較 処 理 し た 配列 2<br>"+qry2.toStringCO+"<br>": 
ele.innerHTML += " 還 処 理 し た 配列 3<br>"+qry3.toStringC): 
// 内 容 を 連結 する 関数 
functton connectCprev, current, tndex, targetArray){ 
// 前 と 現在 の 要素 に | の 文字 を 連結 し て 返す 
return Drev+" 1"+Current: 
} 
}, fatse): 


m 王 ビビ TI ロロ N- ロ オ 4 配列 要素 を 前 方 また は 後方 か ら 処 理 する 


ブラ ウザ で index.html を 表示 する と 、 要素 ご と に 先頭 か ら | | 」 を 連結 し た 結果 と 未 尾 か ら 
連結 し た 結果 が 表示 され ます 。 


画 フ LO の ) 丁 2 
ABC.. DE 

重 史 四 し た 丁 21 
AIBICIDIE 

弄 史 時 し た 本 2 


衣 |AIBICIDIE 
本 中 し た 配 P23 
EIDICIBIA 





で EE に 2 Sm 


Ts 夷 を 先頭 か ら 処 理 す る に は 「reduce()」 メ ソ ッ ド 、 
末尾 か ら 処 理 す る に は 「reduceRight() 」 メソッド を 使う 


配列 要素 を 先頭 か ら 処 理 す る に は 、「reduce( 」 メ ノッ ド を 使い ます 。「reduce()」 メ 
ソ ッ ド の パラ メー タ は 2 つ あ り ま す 。 最初 の パラ メー タ に は 、 コ ー ル バッ ク 関 数 を 指定 し ます 。 
2 番目 の パラ メー タ に は 、 初期 値 を 指定 し ます 。 な お 、 2 番目 の パラ メー タ は 省略 する こと 
が で きま す 。 

コー ル バ ッ ク 関 数 に は 、4 つ の パラ メー タ が 渡さ れ ま す 。 最初 の パラ メー タ は 前 の 値 
(コー ル バ ッ ク 関 数 で 処理 され て きた 結果 )、2 番 目 の パ ラメ ー タ が 現在 の 要素 、3 番 目 
の パラ メー タ に は 要素 の 位置 、 4 番目 は 操作 対象 の 配列 に な り ま す 。| reduce ) 」 メ ソ ッ 
ド は 、 コー ル バ ッ ク 関 数 か ら 「return」 文 で 戻さ れ た 内 容 を 返し ます 。 

配列 要素 を 末尾 か ら 処 理 する 場合 は 、|「 reduceRight() 」 メ ソ ッ ド を 使い ます 。 指定 す 
る パラ メー タ や コー ル バ ッ ク 関 数 に 渡さ れる 内 容 は 、| reduce() 」 メ ノッ ド と 同じ で す 。 

「 reduce() 」 メ ノッ ド 、「reduceRight() 」 メ ノッ ド と も 配列 の 内 容 が 疎 (配列 要素 が 空 ) 
の 場合 、 そ の 部 分 は コー ル バ ッ ク 関 数 に は 渡さ れ ま せん 。 また 、 元 の 配列 は 何 も 変 化し 
ませ ん ( 非 破壊 ) 。 

な お 、 古い プラ ウザ で は reduce() 」 メ ソ ッ ド と 「reduceRight() 」 メ ノッ ド は 実装 され て 
いま せん が 、 次 の URL に ある コー ド を 使う こと で 同等 の 機能 を 実装 する こと が で きま す 。 


https://developer.mozilla.org/ja/JavaScript/Reference/ 
OUDjectS/Array/reduCe 


https://developer.mozilla.org/ja/JavaScript/RHeference/ 
OUDjects/Array/reduceRHight 


関連 項目 
@ 配列 要素 を 順番 に 処理 する 2 誠 Se に (の あがる 流さ 1 の を る: 9 8 生か D. ] 3 の 
の 配列 要素 を 加工 する サキ ザー ザー マイ アピ アイ ャ バト D. 1 40 
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LIE6 』Chrome Safari 5 | Firefox 4 1 Opera 11 | iOS4 」 Android2 1 WP 」 


=1 ゴ lmINBa に 1m 
配列 要素 を ソー ト す る 


ここ で は 、 配列 要素 を ソー ト する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<metg charset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<SCPtpt Src="]S/sqmple.]S"></scr1Dpt> 
</hegd> 
<body> 
<OuUtDut キ ></OUtDut> 


に に まき こい 4 ェ 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


window. addEventLtstener("1oad" 。 functton(){ 
var ele = document.getElementsByTagName( "output")[9] : 
// 配列 を 作成 
Var myArray1 = [9 の, -19, -4, 199, 5, 9, 13, 99, -99]: 
Var myArray2 = [9 の, -19, -4, 199, 5, 9, 13, 99, -99]: 
// 配列 を ソー ト ( 文 字 コ ー ド 単位 ) 
var qry1 = myArray1 . sort( ): 
// 配列 を ソー ト 関 数 を 指定 し て ソー ト 
var qry2 = myArrayZ.sort(functton(Ca。b){ 
return q - b: 
} う : 
// 結果 を 出力 
ele.tnnerHTML = " 圏 元 の 配列 1<br>"+myArray1.toStrtngC)+"<br>": 
ele.innerHTML += " 較 処 理 し た 配列 1<br>"+ary1.toStrtng()+"<br>": 
ele.innerHTML += " 較 処 理 し た 配列 2<br>"+qry2.toStrtng(): 
}, faqtse): 
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還 ビビ ピロ TI ロト N- 口 ら 口 mW 配列 要素 を ソー ト す る 


プラ ウザ で index.html を 表示 する と 、 配列 要素 が 文字 コー ド で ソー ト さ れ た 結果 と 、 昇順 で 
ソー ト さ れ た 結果 が 表示 され ます 。 


還 フ LO の) 西 2 中 1 

-19 -4 -99.0.100.13.5.9.99 
画 交 H 四 し た 丁 P21 

-19 -4.-99 0.100.13..9.99 


m 各 理 し た 配 じ 引 2 
-99.-19.4.0.5.9.13.99.100 





mmlN 下 要素 を ソー ト す る に は 「sort()」 メソ ッ ド を 使う 


要素 を ソー ト す る に は 、「sort() 」 メ ソ ッ ド を 使い ます 。 | sort()) 」 メ ソ ッ ド の パラ メー タ に 
何 も 指定 し な い 場 合 、 要素 は 文字 コー ド 順 で ソー ト さ れ ま す 。 

パラ メー タ に は 、 比較 用 の 関数 を 指定 する こと が で きま す 。 比較 用 の 関数 に は 2 つの 
パラ メー タ が 渡さ れ 、 戻り 値 に よっ て 要素 が ソー ト さ れ ま す 。 戻り 値 が |0」 未 満 の 場合 、 
昇順 に ソー ト さ れ ま す 。 戻り 値 が 「0」 よ り 大 きい 場合 は 、 降順 に ソー ト さ れ ま す 。「 0」 の 場 
合 は ソー ト さ れず 、 その まま に な り ま す 。 

















較 比 較 用 関数 を 指定 し な い 場 合 田 昇 順 の 比較 用 関数 を 指定 し た 場合 一 降順 の 比較 用 関数 を 指定 し た 場合 


[9 -1,700.0.-5].sort() [9.-1.700,0.-5].sort( [9.-1.700.0.-5].sort( 
function(a,b)freturn a-D:) function(a,b)ireturn D-a 
) ) 
[-1, -5,0, 700, 9] [-1, -5, 0, 700, 9] [700, 9, 0, -1, -5] 













文字 コー ド 順 で ソー ト さ れる 。 数 値 が 小さ い 方 か ら ( 昇 順 で ) 数 値 が 大 きい 方 か ら ( 降 順 で ) 
な り 、 文 字 コ ゴー ド の 値 に 従っ て 
に ト さ れる 。 


| コ | @ | 
Lv | sw 
に しき 本 > 1 















| 生 こ に きこ: ミト a 
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LIE6 』Chrome Safari 5 」 Firefox 4 | Opera11 1 iOS 4 1 Android2 ! WP 


=1 コ mWlmIN 昌 ml1 
配列 要素 を 逆順 に する 


ここ で は 、 配列 要素 を 逆順 に する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta chgrset="utf-8"> 


<tttle>SqmpLe</tttle> 





<SCPtDt Src="]S/sample.]S"></scrtDpt> 
</head> 
<body> 


| に まき 上 My4 ェ 


<OUDu キ ></OutDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow. addEventListener("1ogd"。 functton(){ 
var ele = document.getElLementsByTagName( "output")[9]: 
// 配列 を 作成 
VONVAMEOE MS 
// 配列 の 内 容 を 出力 
ele.tnnerHTML = " 較 配 列 内 容 ": 
ete.innerHTML += "<br> 処 理 前 :"+myArrgy1.toStrtng(): 
// 配列 を 逆順 に する 
myArray1 . reverse( ): 
ele.innerHTML += "<br> 処 理 後 : "+myArray1.toStrtng(): 
+, faqtse): 


ブラ ウザ で index.html を 表示 する と 、 配列 要素 を 逆順 に し た 結果 が 表示 され ます 。 


mW 折 2 中 内 容 
処理 前 :AB.CDEjF.G 
処理 後 :GFEJD.C.B.A 


miiiamli 下 想 中 要素 の 順序 を 逆順 に する に は 「reverse()」 メソ ッ ド を 使う 


配列 要素 の 順序 を 逆順 に する に は 、|「reverse() 」 メ ノッ ド を 使い ます 。「reverse () 」 
メソ ッ ド を 実行 する と 、 指定 し た 配列 の 要素 その も の が 逆順 に な り ま す (配列 は 破壊 ) 。 ま 
た だ 、| reverse() 」 メ ソ ッ ド は 、 逆順 に し た 結果 を 配列 と し て 返し ます 。 
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=1 ゴ mglmlN 昌 に シレ 
配列 要素 内 容 を 前 方 / 後 方 に ずら す 


ここ で は 、 配列 要素 内 容 を 前 方 / 後 方 に ずら す 方法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta Charset="utf-8"> 


<tttle>Sqmp Le</t1ttle> 





<SCrtpt src="]S/sample.]S"></SCr1Dt> 
</head> 
<body> 
<OUtDu キ ></OuUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow .addEventLtstener( "Load" 。 functton(){ 


に きこ >4 Sa 


var ele = document.getEtementsByTagName( "output")[9]: 

// 配列 を 作成 

和 0 が 溢 W 才 証人 

// 配列 の 内 容 を 前 方 に ずら す 

var ttem = myArray .Shtft(): 

ele.tnnerHTML = item + "が 取り 出さ れ ま し た <br>": 

ele.tnnerHTML += "配列 内 容 は : "+myArray .toString(): 

// 配列 の 内 容 を 後方 に ずら し 、 新た な 要素 を 追加 

var len = myArray.unshtft("X"。 "YY" う : 

ele.tnnerHTML += "<hr> 新 た な 配列 の 長 さ は "+Len + "<br>": 

ele.tnnerHTML += "配列 内 容 は : "+myArray .toStrtng(): 
+, false): 


ブラ ウザ で index.html を 表示 する と 、 配列 の 先頭 の 要素 が 取り 除 か れ て 有 要素 が 前 方 に 移動 
し た 結果 と 、 配列 の 先頭 に 要素 を 追加 し て 要素 が 人 後方 に 移動 し た 結末 が 表示 され ます 。 


A が 取り 出さ れ ま し た 
配列 内 容 は :BCDEFG 


新た な 配 引 の 長 さ は 8 


配列 内 容 は : 又 YBCDEFG 
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まこ に まき こい 45 ト a 
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mm 選 ビ ピロ T| 口 届 - 口 2 配列 要素 内 容 を 前 方 / 後 方 に ずら す 






内 容 を 前 方 に 移動 させ る に は 「shift()」 メ ソ ッ ド 、 
後方 に 移動 ご せる に は 「unshift()」 メ ソ ッ ド を 使う 


配列 内 容 を 前 方 に 移動 さす せる に は 、「shift ()) 」 メ ソ ッ ド を 使い ます 。「shift() 」 メ ノッ ド 
は 、 配列 の 最初 の 要素 を 取り 出し 、 残り の 要素 を 1 つ ず つ 前 方 に ずら し ます 。 

配列 内 容 を 後方 に 移動 させ る に は 、「unshift () 」 メ ソ ッ ド を 使い ます 。「unshift() 」 メ 
ノッ ド に は 、 配列 の 先頭 に 挿 人 し た い 内 容 を 指定 し ます 。 複数 の パラ メー タ を 指定 し た 
場合 は 、 そ の 数 だ け 配 列 の 先頭 に 挿 信 され ます 。 また 、「unshift() 」 メ ソ ッ ド は 、 配列 に 
挿 人 後 の 全 要 素数 を 返し ます 。 


miml 思 2 に 間 症 下 内 容 を ロー テー ショ ン さ せる 


配列 内 容 を ロー テー ショ ン さ せる に は 、 次 の コー ド の よう に 「myArrayjpush(myArray. 
shift () ) 」 と し ます 。 取り 出し た 要素 を 末尾 に 追加 する こと で 、 配列 内 容 を ロー テー ショ ン 
させ る こと が で きま す 。 















var ele = documert .getEltementsByTagNgme( "output")[9] : 
// 配列 を 作成 
WO MPOM 9 
// 配列 の 内 容 を ロー テー ショ ン さ せる 


for(Cvar 1=1: 1<=1 の 9: 1++){ 












myArray .Push(myArray . shtft( )): 
ete.innerHTML += i++" 回 目 の 配列 内 容 : "+myArray .toStrtngCO+"<br>": 





} 






関連 項目 ゅ ゅ 





e 配列 要素 を 追加 削除 する 上 …… ド ドー ドー ドーーーー…ー : 間 科 200MALNNIA 人 5 p.142 


LIE6 Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS4 | Android2 』WP/ 


し SO 


配列 要素 を 文字 列 に 変換 する 


ここ で は 、 配列 要素 を 文字 列 に 変換 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 


<title>SampLe</t1t1e> 





<Scrtpt src="]s/sample .]S "></SCr1Dt> 
</head> 
<body> 
<OUDU キ ></OuDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .addEventLtstener("1oagd" 。 functton(){ 


EE ココ ヨ エ コマ ロロ 


var ele = document.getEtementsByTagName("output")[9]: 
// 配列 を 作成 
var myArrgy = ["A"。 "B"。{ "DD" : 59, "E" : 63}, new Date()]: 
// 配列 を 文字 列 に 変換 する 
var myStr = myArray.toStrtng(): 
// 配列 を 文字 列 に 変換 する 
var myJson = JSON.strtngtfy(myArray): 
// 配列 の 内 容 を 出力 
ele.tnnerHTML = " 較 変 換 結果 ": 
ele.1nnerHTML += "<br>toStrtng: "+myStP: 
ele.1tnnerHTML += "<br>JSON: "+myJson: 
+, false): 


ブラ ウザ で index.html を 表示 する と 、 配列 要素 を 文字 列 に 変換 し た 結果 が 表示 され ます 。 
上 の 段 は 「toString() 」 メ ノッ ド を 使っ て 変換 し た 結果 で 、 下 の 段 は [JSON.strimgify  」 メ ノッ 
ド を 使っ て 変換 し た 結果 と な り ま す 。 


沼 換 結末 
toString: AB.[object Objectl.Tue Mar 20 02:07:31 UTC+0900 2012 
JSON: ["A""B".("D"-59."E":63}."2012-03-19T17-07:31.400Z"] 
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王 ビ ピロ 丁 | 口 N - 口 ら コ W 配 列 要素 を 文字 列 に 変換 する 







配列 要素 を 文字 列 に 変換 する に は 
「toString()」 メソッド や 「JSON.stringify ()」 メソ ッ ド を 使う 


配列 要素 を 文字 列 に 変換 する に は 、「toString() 」 メ ノッ ド を 使い ます (配列 オブ ジェ クト 
の 場合 、「join() 」 メ ソノ ッ ド を 実行 し た 結果 と 同じ に な る ) 。 た だ し 、「toString() 」 メ ノド は 文 
字 列 や 数 値 は その まま 処理 し ます が 、 オブ ジェ クト の 場合 は 「 [object] 」 と いっ た 文字 列 に 
変換 され て し まう こと が あり ます 。 オプ ジェ クト \ も 変換 し た い 場合 に は 、[「JSONstringify () 」 
メソ ッ ド を 使う 方 法 も あり ます 。 これ は 、 オブ ジェ クト を JSON 形式 に 変換 する メソ ッ ド に な り ま 
す 。 パラ メー タ に 変換 し た い オ ブ ジ ェクト を 指定 し ます 。 


mm 沿 引 に 間 還 ロ 外 オブ ジェ クト の 生成 時 間 


配列 オブ ジェ クト を 生成 する 場合 、 JavaScript で は 2 種類 の 方 法 が 用 意 き され て いま す 。 
1 つ は |new Array()」 と する 方 法 で 、 も う 1 つ が 「[ ]」 と し て 配列 を 生成 する 方 法 で す 。 
高速 に 配列 オプ ジェ クト を 生成 し た い 場 合 に は 、[new Array() 」 で な く 、「[ ] 」 を 使い ま 
す 。 ブ ラウ ザ に よっ て は 数 倍 の 速度 差 が 発生 する 場合 あり ます が 、「new Array() 」 で も 
|[ ]] で も 大 差 が な い 場合 も あり ます 。 いずれ に せよ 、「[ ]」 を 使っ た 方 が 配列 は 高速 に 
生成 され ます 。 





に IEII に 四 














ED じ DTIUHN- 口 54 


[WeakMap」 オ ブ ジ ェクト を 生成 する 





ここ で は 、| WeakMap」 オ ブ ジ ェクト を 生成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metqa charset="utf-8"> 
<tit1le>Sampte</t1tle> 
<SCrtpt src="]S/sampLe .]S"></SCr1Dt> 
</heqd> 
<body> 
<OUtDut></OutDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow. aqddEventLtstener("1oad"。 functton()+ 


| まこ に きき = に 4 ミト al 


var ele = document .getEtementsByTagName( "output" う [9] : 

// WeakMgp オ プ ジ ェ クト を 生成 

var wmOb] = new WeakMap(): 

// キー に する オプ ジェ クト を 生成 

var ob] = { model : "mmz-721"。 prtce : 89899 }: 

// Weak マ ッ プ に キー と 値 を 設定 

wmOb]j.set(ob], "photo1 .]pg"): 

// Weak マ ッ プ の 値 を 読み 出し 

var data = wmOb].get(ob}): 

// 結果 を 出力 

ele.tnnerHTML = wmOb].toStrtng()+"<br>"+datg: 
}。fqlse): 


ブラ ウザ で index.html を 表示 する と 、「 WeakMap」 オ プ ジ ェ クト で ある こと を 示す 結果 と 、 
み 出 し た 内 容 が 表示 され ます 。 


F 


[object WeakMap] 
photo1 .jpg 
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衝 王 ビ ピロ T 口 凡 - 口 5 オイ mW 「WeakMap」 オ ブ ジ ェクト を 生成 する 


=m ヨ = 中 「WeakMap] オ ブ ジ ェクト を 生成 する に は 「new WeakMap()」 と する 


JavaScript で は 、 オブ ジェ クト / 連 想 配 列 (ッシュ) を 作成 する 際 に キー と 値 を 指定 し 
ます 。 値 に は ほとん ど 制 限 が あり ませ ん が 、 キー に は オブジェ クト が 使用 で き な い と いっ た 
制限 が あり ます 。 キー に オブジェ クト を 使用 し た い 場 合 に は 、「 WeakMap 」 オ プ ジ ェ クト を 
利用 し ます 。 

| WeakMap」 オプ ジェ クト を 生成 する に は 「new WeakMap() 」 と し ます 。「Weak 


Map」 オ プ ジ ェ クト で は 、 キー に オプ ジェ クト が 使用 で きる た め 、 より 和 柔軟 な 処理 を 行う こ 
が で きま す 。 生成 し た 「 WeakMap 」 オ ブ ジ ェクト に 値 を 設定 する に は 、「set() 」 メソッド を 
使い ます 。 最初 の パラ メー タ が キー、 2 番目 の パラ メー タ が 値 に な り ま す 。 設定 し た 値 を 読 
み 出 す 場 合 に は 、| get() 」 メ ソ ッ ド を 使い ます 。 パラ メー タ に は 、 読み 出し た い キ ー 名 を 
指定 し ます 。| get 0 」 メ ソ ッ ド は 必要 で あれ ば 、 初期 値 を 示す 2 番目 の パラ メー タ も 指定 
する こと が で きま す 。 





EC 蛋 ヨ エロ コマ ロロ 





関連 項目 
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EE も MMNー し つう 5 


WeakMap で 該当 する キー が ある か 調べ る 





ここ で は 、 WeakMap で 該当 する キー が ある か 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 


<tttle>SampLe</t1tle> 





<Scrtpt src="]S/sample .]S "></SCPtDt> 
</head> 
<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window.gddEventListener("1ogd", functton()+ 

var ele = document .getEtementsByTagName( "output")[9]: 

// WeagkMgop オ プ ジ ェ クト を 生成 

var wmOb] = new WegkMap(): 

// キー に する オブ ジェ クト を 生成 

var ob]1 = { model : "mz-711",。 prtce : 79899 }: 

var ob]2 = { model : "mz-721"。 prtce : 89899 }: 

// Weak マ ッ プ に キー と 値 を 設定 

wmOb].set(Cob]1, "photo1.]pg"): 

wmOb]j.set(ob]2Z, "photo2.]pg"): 

wmOb].set({model : "mz-731"+, "128990"): 

// Weak マ ッ プ に 該当 する キー が ある か 調べ る 

var flaqg1 = wmOb].has(ob]1): 

var flgg2 = wmOb].has(wtndow): 

var flag3 = wmObj.has(tmodel : "mz-731" は ): 

// 結果 を 出力 

ele.tnnerHTML = flag1+"<br>"+f1gg2+"<br>"+f Lag3: 
+, false): 


選 半 | 革 こ に まき 貞 こい 4 ョ | 
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mW ビビ T1 ロ トド - 口 5 W WeakMap で 該当 する キー が ある か 調べ る 


プラ ウザ で index.html を 表示 する と 、 該当 する キー が ある か 調べ 、 そ の 結果 が 表示 きれ 
ます 。 


MM ーーーーー ー も か の ペ 
| 間 - Cooc 目 に 
6 ー : 想 計 


59 は 2 半 り 53kapcchart2R RT 重く 


〔」 
央 
レン 
U 
al 
上 
= 4 


WeakMap で 該当 する キー が 存在 する か どう か は 、「has() 」 メ ソ ッ ド で 調べ る こと が で 
きま す 。 パラ メー タ に 、 調べ た い キ ー と な る オプ ジェ クト を 指定 し ます 。 該当 する キー が あ 
れ ば | true」 を 返し 、 キー が な けれ ば [false 」 を 返し ます 。 


関連 項目 ゅ ゅ l " 
@ [WeakMap」 オ プ ジ ェ タ ト を 生成 する ho いれ Amberewrveyette p.153 
@ WeakMap の キー を 削除 する 和 一 ……ーー バ ーー ドド ドド ドド ドド ーー…… D.157 
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呈 ビ ロビ TI 品 N - 口 ら 6 
WeakMap の キー を 削除 する 


ここ で は 、 WeakMap の キー を 削除 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>SampLe</t1tle> 





<SCrtpt src="]S/sample .]S"></SCr1Dt> 
</head> 
<body> 


kW コ ヨ ト エロ コマ ロロ 


<OutDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.qddEventLtstener("tLoqd" , functton(){ 
var ele = document .getEtementsByTagName( "output")[9]: 
// WegkMop オ ブ ジ ェクト を 生成 
var wmOb] = new WeakMap(): 
// キー に する オプ ジェ クト を 生成 
var ob] = { model : "mz-711",。 prtce : 79899 }: 
// Weak マ ッ プ に キー と 値 を 設定 
“wmOb]j.set(ob], "photo1.]pg"): 
// Weak マ ッ プ に 該当 する キー が ある か 調べ る 
var flag = wmOb].has(ob]}): 
// 結果 を 出力 
ele.innerHTML = "削除 前 :"+ftag+"<br>": 
// キー を 削除 する 
wmOb] .delete(ob]}): 
// Weak マ ッ プ に 該当 する キー が ある か 調べ る 
flag = wmOb].has(ob]): 
// 結果 を 出力 
etle.tnnerHTML += "削除 後 :"+ftag: 
}。 faqlse): 


15/ 


き ビビ ロイ イエ | 品 トト | - 口 56 mw WeakMap の キー を 削除 する 


ブラ ウザ で index.html を 表示 する と 、 削除 する 前 は キー が 存在 し て いる こと を 示す 「true」 
と な り 、 削除 後 は キー が な いこ と を 示す 「false」 が 表示 され て いま す 。 





削除 前 : true | 
削除 後 :false 


CI 


< に ド き ーー は 2ge 


miml 引 キー の 削除 を 行う に は 「delete()」 メソッド を 使う 


WeakMap で キー を 削除 する に は 、| delete() 」 メ ソ ッ ド を 使い ます 。 パラ メー タ に は 、 
削除 する キー と な る オプ ジェ クト を 指定 し ます 。 パラ メー タ に 指定 し た オブ ジェ クト が 存在 
し な い 場 合 は 、 エラ ー に な り ま す 。 





関連 項目 
各 「WeakMap」 オブ ジェ クト を 生成 する の 09 当 な る は 拓 a D. 1 53 
e WeakMap で 該当 する キー が ある か 調べ る …… ひ … つ i ド ドド ーーー…ー D.155 
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LIE6 』Chrome 』 Safari 5 | Firefox 4 』 Opera11 1 iOS4 】 Android2 1WP 


ht し ITN- に よ の 人 / 


[Number」 オ ブ ジ ェクト を 生成 する 





ここ で は 、「 Number」 オ ブ ジ ェクト を 生成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta Charset="utf-8"> 
<tttte>SampLe</t1t1e> 
<ScrtDt Src="]S/Sqmple .]S "></scrtDpt> 
</head> 





<body> 
<OUtDu キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("togd" 。 functton(){ 


尼 ・ 高 難 ーー 


var ele = document.getElementsByTagName( "output")[9] : 
// 変数 n を 数 値 オ プ ジ ェ クト と し て 生成 
varn = new Number("764"): 
// 値 に 1 加算 する 
n=n ロ 11: 
// 結果 を 出力 
ele.tnnerHTML = n+"<br>"+typeofC(n): 
+,。 foqlse): 


プラ ウザ で index.html を 表示 する と 、| Number」 オ プ ジ ェ クト で 生成 され た 値 に 加算 し た 結 
来 と 変数 の 種類 が 表示 され ます 。 
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還 王 己 ロ 丁 |1 口 NN - ロ 5 プ m「Number」 オ ブ ジ ェクト を 生成 する 


mI ョ Im 画 [NumDer」 オ ブ ジ ェクト を 生成 する に は 「new Number()」 と する 


TavaScript で 数 値 型 の オブ ジェ クト を 生成 する に は 、「new Number() 」 と し ます 。 パ 
ラメ ー タ に 何 も 指定 し な い 場 合 に は 、 変数 は 数 値 型 と し て 生成 され ます 。 パラ メー タ を 指 
定 し た 場合 、 数 値 に 変換 可能 な も の で あれ ば 数 値 に 変換 され ます 。 そう で な い 場 合 は 、 
数 値 で は な いこ と を 示す | NaN」 (Not a Number) に な り ま す 。 

JavaScript で は 8 進数 、 10 進 数 、 16 進 数 を 扱う こと が で きま す 。 8 進数 は 先頭 が |0」 
か ら 始 まり 、 数 値 だ け で 構成 され る 値 に な り ま す 。 た と えば 、|053」 や |「011」 で す 。 10 
進数 は 「0] か ら 始 ま ら な い 数 値 に な り ま す 。 16 進 数 は 先頭 2 文字 が | 0x」 で 始ま り 、|0」 





ロロ 
ー[9」 と [al 一 [| (大 文字 小文字 は 関係 な し ) で 構成 され る 値 に な り ま す 。 た と えば 、 > ト 
「0xff] や 「0x96ba」 で す 。 な お 、「strict」 モ ー ド の 場合 、 8 進数 を 扱う こと は で きず 、「0」 ー 
か ら 始 まる 数 値 を 指定 する と エラ ー が 発生 し ます (下図 参照 )。 " 
値 
数 
デ 


“USe St て ric て "> 
Va n = 9721: 


e.innerHT 提 し = 
})(e1e): 
12 P fal se ) : 
の 





]avaScript で は 実数 の み を 扱う こと が で き 、 標準 の オプ ジェ クト で 虚数 を 扱う 方 法 は 


用 意 さ きれ て いま せん 。 





関連 項目 ょ ゅ TSN NEC 
e 大 きき な 数 値 同士 の 演算 を 行う …………………「ー に い 居 サテ 人 4 する VC て D.173 
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LIE6 」 Chrome Safari 5 | Firefox 4 | Opera 11 | iOS4 1 Android2 IWP 





ら E (LEIUN- ロ 5 日 


婦 蛋 の 桁 人 数 を 指定 する 





ここ で は 、 数 値 の 桁 数 を 指定 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttte>Sample</t1t1e> 
<SCrtDt Src="]S/sample .]S "></sCrtpt> 
</heqd> 





<body> 
<OU て Du キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd"。 functton(){ 


失 ・ 両 壮 EE に PIE に 2Se 





var ele = document .getElLementsByTagName( "output ")[ の ] : 
// 変数 に 数 値 を 代入 
var n = 1969.215: 
// 桁 数 を 指定 する 
var num = n.toPrectston(5): 
// 結果 を 出力 
ete.innerHTML = " 元 の 数 :"+n+"<br> 処 理 後 :"+num: 
}, faqlse): 


プラ ウザ で indexhtml を 表示 する と 、 数 値 に 桁 数 を 指定 し た 結果 が 表示 され ます 。 


元 の 数 : 1969.215 


処理 後 : 1969.2 








mi ョ = に M 由 桁 数 を 指定 する に は 「toPrecision()」 メソ ッ ド を 使う 


JavaScript で 数 値 の 桁 数 を 指定 する に は 、「toPrecision () 」 メ ノッ ド を 使い ます 。 た と 
えば 、| 12345.678」 と いう 数 値 が あり 、「 toPrecision (6) 」 と する と 「12345.7 | が 返さ れ ま 
す 。 | toPrecision (2) 」 と する と 、「 1.2e+4 」 の よう に 指数 形式 で 返さ れ ま す 。 


関連 項目 ょ ヶ 


を 艇 値 か 小雪 点け 下 h 林 加重 2 MarMAtz12e202823008027 コ くく に 440eee2 0 MCA402 4 p.163 
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LIE6 1 Chrome Safari 5 』 Firefox 4 1 Opera11 』 iOS4 』 Android 2 』WP 


ロコ ヒビ ロビ T 口 届 - 口 ら ワ 
数 値 を 小数 点 以下 n 桁 に する 


ここ で は 、 数 値 を 小数 点 以下 n 桁 に する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metog charset="utf-8"> 
<tttte>Samp le</t1tle> 
<SCrtDpt src="]S/Sample.]S"></ScrtDt> 
</head> 
<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .qddEventLtstener( "toad" 。 functton()+ 





眉 ※・ 高 半 記 ETTEE ド 4 ミド 





var ele = document.getEtementsByTagName( "output")[9] : 

var n = 1969.2154649: // 変数 に 数 値 を 代入 

var num = n.toFixed(3): // 小数 点 以 下 を 3 桁 に する 

ele.tnnerHTML = " 元 の 数 :"+n+"<br> 処 理 後 :"+num: // 結果 を 出力 
+, false): 


プラ ウザ で index.html を 表示 する と 、 指定 し た 小数 点 以下 の 桁 数 に し た 数 値 が 表示 され 
ます 。 


と コ 


ロロ NEPHINT 


]avaScript で 数 値 の 小数 点 以下 の 桁 数 を 指定 する に は 、| toFixed() 」 メ ソ ッ ド を 使 
いま す 。 た と えば 、「12345.6789」 と いう 数 値 が あり 、| toFixed (2) 」 と する と 、 12345.68 が 
返さ れ ま す (指定 し た 桁 数 以下 は 四捨五入 され る ) 。 小数 値 を 四捨五入 し て 整数 化し 
た い 場 合 に は 、「toFixed(0) 」 と し ます 。 





関連 項目 ょ ゅ 


e 数 値 の 桁 数 を 指定 する 0p.162 
e 四捨五入 / 切 り 捨 て / 切 り 上 げ を 行う …… の im D.184 
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セト 





164 


LIE6 』 Chrome 』 Safari 5 」 Firefox 4 1 Opera11 | iOS4 I Android2 WP_ 


=1 ゴ mmlmlN 由 mf=a 
3 桁 ご と に 区 切る 


ここ で は 、 数 値 を 3 桁 ご と に 区 切る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sqmple</t1t1le> 
<SCrtDt src="]s/sampte .]S"></scrtDt> 
</hegd> 
<body> 
<h1>3 桁 ご と 区 切る </h1> 


<form> 








<tnput type="text" 1d="num" value="5963"> 
</form> 
<OUtDut></OUtDut> 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("toad" functton(){ 
var ele = document.getELementsByTagNgme( "output")[9] : 
// テキ スト フィ ー ル ド に 入力 され た ら リ アル タイ ム に 結果 を 表示 
document.getElLementById(C"num").onkeyup = function(){ 
ele.tnnerHTML = num3(thts .value): 
} 
// 指定 し た 桁 数 ご と に 区 切っ た 結果 を 返す 関数 
function num3(num, separate){ 
// パラ メー タ が 省略 され た 場合 は 3 桁 ご と に する 
separate = separate || 3: 
// 結果 を 入れ る 変数 を 初期 化 
Vdrn = "。 
Var count = の : 
// 数 値 を 文字 列 に 変換 
var Str = new Strtng(num): 
for (var 1=str.1Length-1: 1t>=9: 1--){ 
n = Sstr.charAt(1) + ni 
COUn キ ++: 
tf (CC(count % separate) == 9) && (1 != の )) n = ","+n: 
} 
Peturn ni 
} 
}, faqlse): 


還 王 TI ロ N - 口 6 ロロ m 3 桁 ご と に 区 切る 


ブラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド に 数 値 を 人 人力 する と 、 リア ル タ イ ム に 3 桁 
に 区 切ら れ た 数 値 が 表示 され ます 。 


13 桁 ご と 区 切る 


59634649 。 
59.634.649 








mNImlNm 画 づ 桁 ご と に 区 切る に は 数 値 を 文字 列 に 変換 し て 「,」 を 連結 する 


3 桁 ご と に 区 切る に は 、 数 値 を 一 度 、 文字 型 に 変換 し ます 。 変換 し た 文字 列 を 末尾 か 
ら 連 結 、 お よび 、 カウ ント し て いき 、「3」 で 割り ます 。 その 余り が 「0」 の 場合 に 、|,」 (カン マ ) 
を 文字 列 に 連結 し ます 。 これ を 数 値 の 桁 数 (文字 列 の 長き ) だ け 繰 り 返 し ます 。 サン プル 
で は 、「num3」 関 数 内 の 2 番目 の パラ メー タ に 「,」 (カン マ ) で 区 切る 桁 数 を 指定 で きま す 。 
「4」 に する と 4 桁 ご と に 「,」 (カン マ ) で 区 切ら れ ま す 。 


眉 洋 ・ 高 壮 に に ま に 45 ミ = 
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LIE6 』Chrome 』 Safari 5 」 Firefox 4 』 Opera 11 | iOS4 | Android2 IWP_ 


ES も すさ この 6 1 


数 値 を 指定 桁 数 に し て 
不定 分 を 先頭 か ら 「0」 で 埋め る 
ここ で は 、 数 値 を 指定 桁 到 に し て 、 不足 分 を 「0」 で 埋め る (ゼロ パ デ ィ ン グ ) 方 法 に つい て 
解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta Charset="utf-8"> 


<titte>SampLe</tttte> 





<SCPtDt Src="]S/Sample.]S "></sCrtpt> 
</head> 
<body> 

<h1> ゼ ロ パ ディ ング </h1> 


<form> 


由 玄 ・ 両 避 ココ ュ gy 


<1nDut tyDe="text" 1d="num" vatue="256"> 
</form> 
<OUt て Du キモ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1Load", functton(){ 
var ele = document.getEtLementsByTagName( "output") う [9] : 
// テキ スト フィ ー ル ド に 入力 され た ら リ アル タイ ム に 結果 を 表示 
documernt .getElLementById( "num").onkeyup = functton(){ 
ele.tnnerHTML = zeroPaqdding(thts .vqtue, 8): 
} 
// 指定 し た 桁 数 に 揃え る 。 不足 分 は 9 で 埋め る 
functton zeroPaddtngCnum。 count){ 
// 2 番目 の パラ メー タ が 省略 され た 場合 は 8 桁 に する 
count = Count || 8: 
// ゼロ の 文字 を 指定 し た 桁 数 だ け 生 成 
Var Zero = "「: 
for(Cvar 1=9: 1<count: 1 ユ ++){ 
Zero = Zero + "の "・ 
} 
// 9 で 埋め る 
var n = (Zero+num) . SLtce( -coun): 
Peturn ni 
} 
+,。fqlse): 
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呈 ビビ ピロ 丁 | 口 N - 口 6] mw 数 値 を 指定 桁 数 に し て 不足 分 を 先頭 か ら 「0」 で 埋め る 


ブラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド に 数 値 を 人 力 す る と 、 リア ル タ イ ム に 数 
値 が 8 桁 で 表示 され ます 。 8 桁 に 満た な いり 場合 は 、 先頭 が 「0] で 埋め られ ます 。 


ゼロ パ デ ィ ン グ 


4096| 
00004096 





mmlS 画 不足 分 の 桁 を 「0」 で 埋め ゆる に は 「slice()」 メソッド を 使う 


数 値 を 指定 し た 桁 数 で 揃え る 場合 に は 、「slice ()) 」 メ ソ ッ ド を 使い ます 。|slice0」 メ 
ソ ッ ド は 、 指 定 し た 数 だ け 文 字 列 を 抜き 出す こと が で きま す 。 その 際 に 負数 を 指定 する と 、 
文字 列 の 右側 か ら 指定 し た 文字 数 を 抜き 出し ます 。「0」 で 構成 され た 文字 列 と 連結 し 
た 後 で 「slice() 」 メ ソ ッ ド を 使う こと で 、 指定 し た 桁 数 に 揃え る こと が で きま す 。 


護 ・ 高 凌 ま に に EPIEE4se 
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LIE6 上 Chrome 1 Safari 5 | Firefox 4 1 Opera 11 ! iOS4 1 Android2 WP」 


ら EDUDTIHN- 口 らら 2 


小数 部 分 と 整数 部 分 を 分 け て 取り 出す 


| ここ で は 、 小数 部 分 と 整数 部 分 を 分 け て 取り 出す 方 法 に つい て 解説 し ます 。 
s HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 

<meta charset="utf-8"> 

<ttt せ te>Samp Le</t1tle> 

<SCrtpt src="]Ss/sqmpte.]S"></SCrtDpt> 
</head> 
<body> 

<h1> 小 数 部 分 と 整数 部 分 を 分 ける </h1> 


<formm> 





5 口 人 1 
眉 ・ 両 半 に に PE に 4sm 


<1nput type="text" 1d="num" value="987.456"> 
サー </formz> 

了 <div> 整 数 部 : <output></output></div> 
<div> 小 数 部 :<output></output></dtv> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


| wtndow.addEventLtstener("1ogd", functton(){ 
Var ele = document.getElementsByTagName( "output"): 
ー| // テキ スト フィ ー ル ド に 入力 され た ら リ アル タイ ム に 結果 を 表示 
document.getElementById("num").onkeyup = functton(){ 
1 | var n = separate(thts .value): 
' ele[ の ] .tnnerHTML = n.tnteger: 
ele[1] .1tnnerHTML = n.floot: 
} 
// 整数 部 と 小数 部 を 切り 分 ける 
functton separate(num){ 
// ゼロ の 文字 を 指定 し た 桁 数 だ け 生 成 


var data = (""+num).spLtt(" の う : 

var tntegerN = parseInt(data[9] ): 

var floatN = parseIntCdata[1]): 

return { tnteger : tntegerN, flogt : flogtN + 
} 


+, faqtse): 
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各戸 ビビ ピロ T エ | 口 N - 口 62 m 小数 部 分 と 整数 部 分 を 分 け て 取り 出す 


ブラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド に 数 値 を 和 人 人力 す る と 、 リア ル タ イ ム に 整 
数 部 と 小数 部 が 表示 され ます 。 


小数 部 分 と 整数 部 分 を 分 


765.4649 
整数 部 : 765 
小 表 部 : 4649 


小数 部 分 と 整数 部 分 を 分 ける に は 文字 型 に 変換 し た 後 で 
EMMAMMI [Split()」 メソッド で 分 割 する 





数 値 を 小数 部 分 と 整数 部 分 を 分 ける に は 、 一 度 、 数 値 を 文字 型 に 変換 し ます 。 文字 
型 に 変換 し た 後 で [split() 」 メ ノッ ド を 使っ て ピリ オド を 区 切り と し て 分 割 し ます 。 分 割 す る 
と 配列 が 作成 され 、 最初 の 要素 に 整数 部 が 、2 番 目 の 要 素 に 小数 部 が 入り ます 。 得 ら 
れ た 結果 を 「praseInt() 」 メ ノッ ド な ど を 使っ て 数 値 に 変換 し ます 。 


眉 詳 ・ 志 和 壮 全 に に に 4 ェ 
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翌 ・ 両 人 に に きこ に 4= ピ 
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LIE6 』 Chrome ! Safari 5 | Firefox 4 1 Opera 11 | iOS4 | Android2 1WP 





=1 ヨ mlmIN 昌 Tc 
介 用 可能 な 最大 値 / 最 小 値 を 取得 する 


ここ で は 、 使用 可能 な 最大 値 / 最 小 値 を 取得 する する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<rmetg charset="utf-8"> 
<tttle>Sample</t1tte> 
<SCr1Dpt src="]S/Sqmple.]S"></SCrtDt> 
</head> 
<body> 
<OutDu キ ></OutDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventListener("1ogd" 。 functton(){ 
var ele = document .getEtementsByTagName( "output")[9] : 
// 変数 max に 最大 値 を 代入 
Var mmax = Number.MAX_VALUE: 
// 変数 min に 最小 値 を 代入 
Var mtn = Number.MIN_VALUE : 
// 結果 を 出力 
ele.innerHTML = "最大 値 :"+max+"<br> 最 小 値 : "+min: 
+。 faqlse): 


ブラ ウザ で index.html を 表示 する と 、 扱え る 最大 値 と 最小 値 が 表示 され ます 。 


最大 値 : 1.7976931348623157e+308 


最小 値 : $e-324 


が える 値 の 最大 値 を 取得 する に は 「Number.MAX_VALUE」 、 
最小 値 を 取得 する に は 「Number.MIN_VALUE」 を 使う 
JavaScript で は 、 実数 値 は 64 ビ ッ ト で 処理 され ます (仮数 部 52 ビ ッ ト 、 指数 部 11 ビ ッ ト 、 
人 符 王 1 ビッ ト ) 。 扱え る 値 の 最大 値 は [Number.MAX_ VALUE」、 最小 値 は [Number. 
MIN_VALUE」 と し て 定義 され て いま す 。 


また 、 正 の 無限 大 は | Number.POSITIVE INFINITY |、 負 の 無限 大 は 「Number 
NEGATIVE_INFINITY 」 と し て 定義 され て いま す 。 










LIE6 1 Chrome Safari 5 ! Firefox 4 1 Opera11 1 iOS4 | Android2 IWP_ 


=1 コ lalaINBml= と ! 
演算 誤差 を 減ら す 


]avaScript で 小数 演算 を 行う と 、 誤差 が 発生 し て 期待 する 精度 が 得 ら れ な いび 場合 が あり 
ます 。 ここ で は 、 演算 誤差 を 減ら す 方 法 に つい て 解説 し ます 。 
= まや lg 引 需 中 ml 人 慎 HTML の コー ド (index.html) 
<!DOCTYPE html> 











<html> 

<head> + 
<meta charset="utf-8"> < 
<tittle>Sgmple</tttte> ー 
<scrtpt src="]s/sample.]S "></scrtpt> 4 : 

</head> 数 

<body> 値 
<h1> 演 算 誤差 を 減ら す </h1> 


<div> 通 常 :<output></output></d1tV> 
<div> 補 正 :<output></output></d1tv> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventListener("1oad" 。 functton(){ 
var ele = document.getEtementsByTaqgName( "output"): 
// ゲタ を は か せ ず に 9.1 を 19 回 加算 する 
var num1 = の : 
for(var 1= の 9: 1<19: 1++){ 
// 9.1 の 場合 、 加算 する と 誤差 発生 
num1 = num1 + の .1: 
} 
ele[9] .1nnerHTML = num1: 
// ゲタ を は か せ て 9.1 を 19 回 加算 する 
var jackup = 19: // 19 倍 。 19 の ゲタ を は か せる 
var num2 = 0 の : 
for(1=9: 1<19: +++){ 
// 9.1 の 場合 、 加算 する と 誤差 発生 
num2 = numZ + の 9.1*]qcKuD: 
} 
// 19 倍 し た の で 最後 に 19 で 除算 する 
num2 = num2 / ]qackuD: 
ele[1] .1nnerHTML = num2: 
}, false): 
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人 ま ・ 両 生 に に 上 こ 4 ミド 
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mm 王 ピロ T| 口 N! - 口 ら 4 m 演算 誤差 を 減ら す 


ブラ ウザ で index.html を 表示 する と 、| 0.1」 を 10 回 、 加算 し た 結果 が 表示 され ます 。 通常 の 
演算 で は 誤差 が 発生 し て 「1」 に な り ま せん が 、 補正 し た 場合 は [1 」 に な り ま す 。 


演算 誤差 を 減ら す 


通常:0. 


補正 : 1 









miNiaml に 中 泥 算 誤差 を 減ら す に は いっ た ん 整数 に し て 演算 する 


JavaScript に 限ら ず 多 く の コ ン ビ ュー タ 言 語 や CPU で は 、 浮動 小数 演算 を 行う と 誤 
差 が 先 生 し ます 。 これ は 小数 が 2 の -n 乗 の 和 で 表現 され る た めで 、 値 に よっ て は 表現 す 
る こと が で き な い た めで す 。 これ を 軽減 さき する に は 、 小数 値 を 10 僅 する な ど し て ゲタ を は 
か せま す 。 整数 演算 の 場合 は 小数 演算 と 異な り 、 2 の n 乗 で 表現 で きる た め 、 誤差 が 発 
生 し ませ ん 。 

な お 、 演算 誤差 に つい て は 、 次 の URL を 参照 し て くだ きい 。 
http://itDrO.nikkeiDDp.CO.jp/article/COLUMN/20071019/285010/ 












また 、 数 値 計 算 を 行う BigDecimaljs ラ イブ ラリ を 利用 する こと で も 演算 誤差 を 防 へ こと 
が で きま す (BigDecimaljs ラ イブ ラリ は 何 種類 か ある ) 。 BigDecimaljs ラ イブ ラリ を 利用 
し た サン プル に つい て は 、 173 ペ ー ジ を 参照 し て くだ さい 。 


http://stz-ida.de/index.DhD?option=com_remository&ltemid=4 
Gfunc= デ startdown&id=13 


https://github.Ccom/dtrebbien/BigDecimaljs 
https://github.com/iriscouch/bigdecimaljs 











関連 項目 ょ ゅ 


@ 大 きか 数値 同 士 の 演算 を 行う すれ CLAY COCXYAS さ YY よ ミミ ミド ャ PT や と YYY ト パル て と YY て ド で で 1 で で ドリ ドド s 刻ま 4 で 


LIE6 ! Chrome ! Safari 5 | Firefox 4 1 Opera11 1 iOS4 」 Android 2 1WP_ 





=1 コ PiglmIN 昌 al=1 
大 き な 数 値 同士 の 演算 を 行う 


]avaScript の 演算 範囲 を 超え た 男 囲 の 数 値 演算 を 行う に は 、 BigDecimaljS ラ イブ ラリ を 
利用 し ます 。 ここ で は 、 BigDecimaljs ラ イブ ラリ を 使っ て 数 値 演算 を 行う 方 法 に つい て 解説 し 
ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<mieta charset="utf-8"> 
<tttle>Sqmple</t1t1e> 


ルス 国 





<Scrtpt src="]s/BtgDectmal-all-Lgst.]S"></SCr1Dt> 
<Scrtpt src="]Ss/sample .]S "></ScrtDt> 

</head> 

<body> 
<h1> 大 き な 値 同士 の 演算 </h1> 


<form> 


眉 洋 ・ 高 半 ET に 2 ミ m 


値 1 :<tnput type="text" 1d="num1" stze="24"><br> 
値 2 :<tnput type="text" 1d="num2" stze="24"><br> 
<tnput type="button" vatue=" 計 算 " 1d="cgtc"> 
</form> 
<OU モ DU キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow .addEventLtstener("1oagd" 。 functton(){ 
document.getE1LementById("catc").addEventLtstener("clLtck"。functton(){ 

var ele = documernt.getEtementsByTagName( "output")[9] : 
// フォ ー ム に 入力 され た 値 を 読み 出す 
var number1 = document .getELementById( "num1").vatue: 
var number2 = document .getElLementById( "numZ").vatue: 
// BigDectimatl オ ブ プ ジ ェ クト に する (パラ メー タ は 文字 列 ) 
var n1 = new BtgDectmal(number1): 
var n2 = new BtgDectmal(number2): 
// 加算 し た 結果 を 表示 
var n = n1.gdd(n2): 
ete.innerHTML = "加算 :"+n+"<br>": 
// 減算 し た 結果 を 表示 
n = n1.subtract(n2): 
ele.tnnerHTML += "減算 :"+n+"<br>": 
// 乗算 し た 結果 を 表示 
n = n1.multtply(n2): 
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mw 王 ビ ピロ T| ロト - 口 6 5 m 大 き な 数 値 同士 の 演算 を 行う 


ele.tnnerHTML += "乗算 :"+n+"<br>": に 4 
// 除算 し た 結果 を 表示 

n = n1.dtvtde(n2): 

ele.tnnerHTML += "除算 :"+n+"<hr>": 

// 通常 の JavaScrtpt で の 演算 結果 

number1 = parseFloat(number1 ) : 

number2 = parseFloot(number2): 

ele.tnnerHTML += "加算 :"+Cnumber1+number2)+"<br>": 

ele.tnnerHTML += "減算 : "+Cnumber1-number2)+"<br>": 

ele.tnnerHTML += "乗算 : "+Cnumber1*number2)+"<br>": 





ele.1nnerHTML += "除算 : "+Cnumber1/number2)+"<br>": 
},。 fgqlse): 
},。 faqlse): 


プラ ウザ で index.html を 表示 する と 、 大 き な 数 値 同士 で 四則 演算 を 行っ た 結果 が 表示 
され ます 。 BigDecimaljs ラ イブ ラリ を 使っ た 場合 は 計算 結果 が 表示 され ます が 、 通常 の 
JavaScript で の 計算 は 無限 大 と な り ま す 。 


・ 両 生ま に に EK に 4=e 


値 2: 98676543298765432987654. 


加算 : 


100000000000000000000000000000000000000000000000 


986765432987654329876543987609999999999999999999 
除算 : 
101341206995088492435541401311744054580396899390 





BigDecimaljs ラ イブ ラリ を 使用 し た 場合 、 演算 誤差 も 軽減 され ます 。 通常 の javaScript で 
は 止 し い 結 末 が 得 ら れ ま せん が 、 BigDecimaljs を 使う と 正しい 結果 を 得る こと が で きま す 。 
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王 己 ピロ 丁 | 口 N - 口 65 m 大 き な 数 値 同士 の 演算 を 行う 





= 上 ヨ =IN 下 止 し い 演算 結果 を 得る に は BigDecimal.jS ラ イブ ラリ を 利用 する 


TavaScript で の 数 値 演算 は 、IEEE 754( 浮 動 小数 点数 演算 標準 ) に 従っ て 行わ れ 
ます 。 これ は 、 一 般 的 な コン ビュ ー タ 上 で 動作 する 言語 と 同じ で す 。 TEEE 754 は 倍 精 
度 (64 ビ ッ ト ) で の 浮動 小数 演算 を 行う た め 、 その 男 囲 を 超え る 数 値 を 取り 扱う こと が で き 
ませ ん 。 avaScript で は 範囲 を 超え た 場合 、 無限 大 を 示す |「Infinity」、 また は 、 負 の 
無限 大 を 示す | -Infinity」 と な っ て し まい ます 。 また 、 小数 演算 を 行う と 演算 誤差 も 発生 


眉 迷 ・ 両 壮 に EEIE に に 45 に 


する た め 、 正しい 計算 結果 を 求め られ る 処理 で は 問題 に な る こと が あり ます 。 

この よう な 場合 、 BigDecimaljs ラ イブ ラリ を 利用 し ます 。 元 は 他 の 言語 の も の で 、 
BigDecimaljs は TavaScript に 移植 さん た も の に な り ま す 。 BigDecimaljS ラ イブ ラリ は いく 
つか あり ます が 、 ここ で は 、 次 の URL に 示す BigDecimaljs ラ イブ ラリ を 使用 し て いま す 。 
ws Big Decimal 

https:// 器 thuD.Com/dtreDDien/BigDecimal.jS 


この BigDecimaljs ラ イブ ラリ で は 、「new BigDecimal( 」 と し て 大 き な 数 値 を 扱う オブ 
ジェ クト を 生成 し ます 。 その 際 、 パラ メー タ に は 数 値 で は な く 、 文字 列 を 指定 し ます 。 つま り 、 
[1234」 で あれ ば 、「"1234'」 の よう に 指定 し ます 。 また 、 計算 結果 で 小数 値 を 得 た い 場合 
に は [「'59630'」 の よう に 「.0」 を 付加 し て 小数 値 で ある こと を 明示 する 必要 が あり ます 。 

BigDecimaljs ラ イブ ラリ で 四則 演算 を 行う メソ ッ ド は 、 次 の 表 の よう に な り ま す 。 





な お 、 IEEE 754 に つい て は 、 次 の URL を 参照 し て くだ さい 。 
http://ja.Wikipedia.0rg/wiki/IEEE_754 
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JI・ 吉 に に まこ に 4 Se 
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m 呈 ビ ビビ ピ T| ロ トト | - 口 65 mw 大 き な 数 値 同士 の 演算 を 行う 


ピロ LUMN 


BigDecila.jS の 演算 メソ ッ ド 






BigDecilajs に は 、 次 の 表 に 示す 多数 の 演算 メソ ッ ド が 用 意 さ れ て いま す 。 


演算 メソ ッ ド 

絶対 値 を 求め る 

n を 加算 する 

BigDecimal と 指定 し た オブ ジェ クト を 比較 する 

n で 除算 する 

n で 除算 し 結果 を 整数 で 返す 

n と 比較 し て 大 きい 方 を 返す 
n 
( 
( 


| [ ' 


(obj) 
) 
(n) 

n と 比較 し て 小さ い 方 を 返す 
n と 乗算 する 
-1 を 乗算 する (符号 反転 ) 
(n) 
(n) 
@ 
intRight(n) 
) 
り 














ロ ) 
+1 を 乗算 する ( 値 に 変化 な し ) 
値 の n 乗 を 返す 
) 
) 


n と 除算 し た 余り を 返す ( 商 を 返す ) 
n を 減算 する 


整数 に 変換 する 
小数 点 を 左 へ n 桁 移動 する 
小数 点 を 右 へ n 桁 移動 する 
スケ ー ル を 返す 
スケ ー ル を 設定 する 
符号 を 返す 
文字 列 に 変換 する 


n と 等 し いか 調べ る 
四捨五入 する 





関連 項目 ょ ゅ 
本 凍 科 細い DA0LronARveoerohee2Uttvett0r145trr 4 半 0 休 6 p.171 


LIE6 』Chrome 1 Safari 5 | Firefox 4 』 Opera11 | iOS4 1 Android2 1WP 





呈 上 E ピ TI 口 届 - 口 6 
ビッ ト 演 算 を 行う 


ここ で は 、 avaScript で ビッ ト 演 算 を 行う 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<tttle>SampLe</t1tle> 
<SCPtDt Src="]S/sample .]S"></SCr1Dt> 
</head> 
<body> 
<h1> ビ ピッ ト 演 算 </h1> 
<OUtDut></OUt て DUt> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.qddEventListener("toqd" 。 functton(){ 





由 迫 ・ 両 仁 作 に に こい に 4 ミド 


var ele = document.getELementsByTagName( "output")[9] : 

// 処理 する 数 値 を 指定 

var n = 15: 

// 論理 積 を 使っ て 数 値 を 偶数 に する 

var num1 = n & Oxfffffffe・ 

// 結果 を 表示 

ele.tnnerHTML = n+" と の @xfffffffe の 論理 積 : "+num1+"<br>": 

// 処理 する 数 値 を 指定 

nh = 12: 

// 論理 和 を 使っ て 数 値 を 奇数 に する 

var num2 = n | 1: 

// 結果 を 表示 

ele.tnnerHTML += n+" と 1 の 論理 和 :"+num2+"<br>": 

// 処理 する 数 値 を 指定 

n = の : 

// 排他 的 論理 和 を 使っ て 数 値 の ビッ ト を 反転 させ 結果 を 表示 

var nu =nA^ 1: 

ele.tnnerHTML += n+" と 1 の 排他 的 論理 和 : "+num3+"<br>": 

// 排他 的 論理 和 を 使っ て 数 値 の ビッ ト を 反転 させ 結果 を 表示 

var num4 = num3 ^ 1: 

ele.tnnerHTML += num3+" と 1 の 排他 的 論理 和 : "+num4+"<br>": 
+,。 false): 


17/ 


画 
1 





性 ・ 宙 中 証 時 


[ ] 
- ヤ 
ーー 
| 
-m 

り 
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gm 選 ビ ピロ 丁 | 口 N|- 口 66 m ビッ ト 演 算 を 行う 


ブラ ウザ で index.html を 表示 する と 、 数 値 を ビッ ト 演 算 ( 論 理 積 、 論理 和 、 排他 的 論理 和 ) 
し た 結果 が 表示 され ます 。 


ビッ ト 演 人 算 


15 と Ox 研 fEffe の 論 理 積 : 14 


12 と 1 の 語 理 和 : 13 
0 と 1 の 排他 的 論理 和 : 1 
1 と 1 の 排他 的 論理 和 : 0 





mml 画 ビッ ト 演 算 を 行う に は ビッ ト 演 算 子 を 使う 


JavaScript で は 、 32 ビ ッ ト 長 で の ビッ ト 演 算 を 行う こと が で きま す 。 ビッ ト 演 算 は 数 値 を 
0」 と | 1」 の 2 進数 に し 、 各 ビ ッ ト に 対し て 処理 を 行い ます 。 それ ぞ れ の ビッ ト 演 算 の 演 
算 子 と 処理 内 容 を 次 の 表 に 示し ます 。 





















ne オート NEC 識 関 Si の SS 
| & | 論理 積 "。 | どちら か の ビッ ト が [0Oj] な 5[O] 
| | | 論理 和 "" "| どちら か の ビッ ト が 「1」 な ら 「1」 

| ^ | 排他 的 論理 和 | 同じ ビッ ト 値 な ら [「0」、 そう で な けれ ば 「1」 






論理 積 の 簡単 な 使用 例 と し て は 、 値 を 常に 偶数 に する こと が で きま す 。 サン プル の よう 
に | Oxfffffffe」 と 論理 積 を 取れ ば 最 下 位 ビ ッ ト が 必ず 「0」 に な る た め 、 値 は 常に 偶数 に な 
り ま す 。 また 、| 0x0000000f」 (15) と 論理 積 を 取れ ば 、 値 は 常に 「0」 一 「15」 の 範囲 に 収 
まる よう に な り ま す 。 

論理 和 は 数 値 を 常に 奇数 に する こと が で きま す 。 値 と 「1」 と の 論理 和 を 取れ ば 常に 最 
下位 ビッ ト が 「 1」 に な る た め 、 常に 奇数 に な り ま す 。 

排他 的 論理 和 を 利用 する と 、 値 を 交互 に 切り 換え る こと が で きま す 。 た と えば 、 値 が [0」 
の 場合 に | 1」 と の 排他 的 論理 和 を 取る と 結果 は 1 に な り ま す 。 さら に 「1」 と の 排他 的 論理 
和 を 取る と 結果 は | 0] に な り ま す 。 つま り 「0」ー「1]ー「0」 つ …… と 交互 に 値 を 切り 換え 
て いく こと が で きま す (トグル スイ ッ チ ナチ ) 。 











LIE6 』 Chrome 』 Safari 5 」 Firefox 4 1 Opera11 1 iOS4 1 Android 2 !WP_ 





=1 ゴ mlmINaI= レ 
絶対 値 を 求め る 


ここ で は 、 絶対 値 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tit1e>SqmpLe</t1tle> 
<SCrtDpt src="]S/sample .]S "></SCPtDt> 
</head> 





<body> 
<OutDut> の </OutDut> 


届 荘 ・ 両 半 に に EK4 ミ m 


</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.aqddEventLtstener("1ogd" 。 functton(){ 

Var n = -12.3: 

// 変数 n の 絶対 値 を 求め る 

var result = Math.qabs(n): 

// 結果 を 出力 

document . getELementsByTagName("output")[9] .1nnerHTML = resut: 
+, false): 


ブラ ウザ で index.html を 表示 する と 、「 -12.3」 の 絶対 を 求め た 結果 が 表示 され ます 。 





mINIslNl 下 絶対 値 を 求め る に は 「Math.abs()」 メソッド を 使う 


]avaScript で 絶対 を 求め る に は 、「Math.abs() 」 メ ノッ ド を 使い ます 。| Math.abs() 」 
メソ ッ ド は 、 値 が 正 数 か 「0」 の 場合 は 、 その まま の 値 を 返し ます 。 値 が 負数 の 場合 は 正 
数 に し て 返し ます 。 
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LIE6 」 Chrome Safari 5 | Firefox 4 』 Opera 11 | iOS4 | Android2 } WP 


=1 コ ImaimlN 由 =1= 
値 を 比較 する 


ここ で は 、 2 つの 値 を 比較 し 、 大 きい 方 か 小さ い 方 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<7metq charset="utf-8"> 


<tttle>Sqmple</t1t1e> 


ロ 
和 


<SCPtDt Src="]S/Sqmple.]S"></sCrtDt> 
</head> 





<body> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


w1ndow. aqddEventLtstener("logd"。 functton()+ 


眉 涯 ・ 布 半 2 に まき 間 こい 4 ae 


var ele = document.getELementsByTagName( "output")[9] : 

// 比較 する 値 を 用 意 

var n1 = 12.34: 

Var nZ = 45.67/: 

// 小さ い 値 を 出力 

ele.itnnerHTML = "小さ い 値 :"+Mgth .mtnCn1,n2)+"<br>": 

// 大 きい 値 を 出力 

ele.tnnerHTML += "大 きい 値 :"+Math.maxCn1, n2)+"<br>": 
+,。 faqlse): 


ブラ ウザ で index.html を 表示 する と 、 2 つの 値 を 比較 し た 結果 が 表示 され ます 。 





を) 還 


小さ い 値 : 12.34 
大 きい 値 :45.67 


値 の 比較 を 行う に は 
NR [Math.min()」 メ ソ ッ ド や 「Math.max() 」 メソッド を 使う 


JavaScript で は 、 値 を 比較 する た め の メ ソ ッ ド が 2 つ 用 意 き され て いま す 。 2 つの 値 の うち 
小さ い 値 を 求め る | Mathmin () 」 メ ノッ ド と 、 大 きい 値 を 求め る 「Mathmax() 」 メ ソ ッ ド で 


す 。 い ずれ も 2 つの パラ メー タ を 指定 し ます 。 | Mathmin () 」 メ ソ ッ ド も 「Mathmax() 」 メ ソ ッ 
ド も 比較 で きる の は 2 つの 値 だ け で 、 配列 内 に ある 値 か ら 大 きい 値 や 小さ い 値 を 求め る 場 
合 は [for」 文 か 配列 の [forEach() 」 メ ソ ッ ド な どの 高階 関数 を 使う 必要 が あり ます 。 
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LIE6 Chrome 1 Safari 5 | Firefox 4 ! Opera11 1 iOS4 | Android2 1WP」 


=1 コ piglmlN 昌 alt= 
三角 関数 で 計算 する 


ここ で は 、 三角 関数 を 使っ た 計算 の 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttte>SqmpLe</t1t1e> 
<SCrtDt Src="]S/Sample .]S"></SCP1Dt> 
</head> 
<body> 
<OUtDut></OutDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.addEventLtstener("1oqd" 。 functton(){ 





失 ・ 両 凌 に に FE に 4 ミロ 


var ele = document.getElementsByTagName( "output")[9] : 
// 26 度 の 正弦 値 <sin) を 求め る 

var result1 = Math.s1n(Z の *Math . PL/180 ): 
ele.tnnerHTML = result1+"<br>": 

// 45 度 の 余弦 値 Ccos) を 求め る 

var resultZ2 = Math.cos(45*Math . PL/180): 
ele.1tnnerHTML += result2+"<br>"・ 

// 69 度 の 正 接 値 (tan) を 求め る 

var result3 = Math.tan(69*Math . PI/180): 
ele.tnnerHTML += result3+"<br>": 

// 逆 正弦 値 Casin) を 求め る (結果 は 度 に し て 表示 ) 
var result4 = Math.qasin(result1): 

result4 = result4 * 18 の / Moth.P1: 
ele.tnnerHTML += result4+"<br>": 

// 逆 余弦 値 Cocos) を 求め る (結果 は 度 に し て 表示 ) 
var result5 = Math.gcos(Cresult2): 

result5 = result5 * 18 の / Moth.PI: 
ele.tnnerHTML += result5+"<br>": 

// 逆 正 接 値 Coton) を 求め る (結果 は 度 に し て 表示 ) 
var result6 = Math.qatanCresult3): 

result6 = result6 * 189 / Moth.PI: 
ele.1nnerHTML += result6+"<br>": 

// x,y 座 標 か ら 角 度 を 求め る (結果 は 度 に し て 表示 ) 
Var xX = 50: 


var y = 1909: 
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王 ロ T| 口 N! - 口 ら 9 m 三角 関数 で 計算 する 


var resultZ = Math.qtanZ(y,x): 4 
result7 = result7 * 18 の / Math.PT: 
ele.1nnerHTML += resultZ: 

}+, faqlse): 


ブラ ウザ で index.html を 表示 する と 、 三角 関数 を 使っ た 計算 結果 が 表示 され ます 。 
ive 


0.7071067811865476 
1.7320508075688767 





眉 翌 ・ 両 鞭 本 区 L コ マロ コ 


三角 関数 を 取得 する に は 
語 細 記 還 直 調 「Math.sin()」 メ ソ ッ ド や 「Math.cos ()」 メ ソ ッ ド な ど を 使う 


JavaScript で は 、 次 の 表 に 示す 三角 関数 が 用 意 さ きれ て いま す 。 三角 関数 の メソ ッ ド 
に 指定 する パラ メー タ は 角度 (degree) で な く 、 ラジ アン (radian) に な り ま す 。 ラジ アン か 


ら 度 に 変換 する に は |「 ラジ アン ※*180/z」、 度 か ら ラ ジア ン に 変換 する は 「 度 ※z/180」 と な 
り ま す 。 

な お 、 演 算 誤 差 が 発生 する た め 、| Math.sin () 」 で 得 た 結果 を | Math.asin () 」 の パラ 
メー タ に 指定 し て も 元 の 値 に 戻ら な い 点 に は 注意 が 必要 で す 。 


説明 
正弦 / サ イン 
余弦 / コ サイ ン 

正 接 / タ ンジ ェ ン ト 

送 正弦 / ア ー ク サイ ン 
逆 余弦 / ア ー ク コサイン 
逆 正 接 / ア ー ク タン ジェ ント 





X 座 標 と Y 座 標 から 角 度 を 求め る 
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LIE6 1 Chrome 』 Safari 5 | Firefox 4 1 Opera 11 」 OS4 ) Android 2 1WP 





BE CE IEIN・ / も | 


円 周 率 を 求め る 


ここ で は 、 avaScript で の 円 周 率 x に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta Charset="utf-8"> 
<tttte>SqmpLe</t1tle> 
<SCcrtpt src="]s/sample .]S"></SCPrtDt> 
</head> 





<body> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 
wtndow .qddEventLtstener("1ogd" 。 functton()+ 
// 円 周 率 を 出力 
document . getEtementsByTagName("output") う [9] .1nnerHTML = Math.PI: 
+, false): ' 


眉 ・ 両 半 ま に EEIE に 4=m 


ブラ ウザ で index.html を 表示 する と 。 円 周 率 x の 値 が 表示 され ます 。 


3.141592653589793 








= 記 ヨ ヨコ ョ = 中 円 周 率 を 扱う に は 「Math.PI」 を 使う 


]avaScript で は 、x は 「Math.PI」 と し て 定義 8 され て いま す 。| Math.PI」 の 値 は 、 ど の 
ブラ ウザ で も 「3.141592653589793」 で 、 小数 点 以 下 15 桁 で で す 。 






器 m 商 昌 N 較 計 (degree) と ラジ アン (radian) を 変換 する に は 


ラジ アン か ら 度 に 変換 する に は 「 ラ ジア ン *180/z」、 度 か ら ラ ジア ン に 変換 する は 「 度 
※ ア /180」 と な り ます 。 
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レロ 


浴 ・ 両 壮 に に まこ に 4 ミト 
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LIE6 』Chrome 』 Safari 5 | Firefox 4 1 Opera 11 』 iOS4 1 Android2 』WP」 


ーー を 1 人 IN 馬 全 


四 措 石和 人 / 切 り 捨 て / 切 り 上 げ を 行う 


ここ で は 、 値 の 小数 点 以下 を 四 捨 五 人 する 方 法 と 、 切り 捨て 、 切り 上 げ る 方 法 に つい て 解 
読 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 











<metg Charset="utf-8"> 
<tttlte>SamplLe</t1tle> 
<SCr1Dt Src="]S/saqmple .]S"></sCrtpt> 
</hegd> 
<body> 
< く OutDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. aqddEventLtstener("1ogd" 。 functton(){ 

Var n = 12.48・ 

// 変数 n を 四捨五入 する 

var result1 = Math.roundCn): 

// 変数 n の 小数 値 を 切り 捨て る 

var result2 = Math.floorCn): 

// 変数 n の 小数 値 を 切り上げ る 

var result3 = Math.cetlCn): 

// 結果 を 出力 

Var ele = document.getElementsByTagName("output")[ の ] : 

etle.tnnerHTML = result1+"<br>"+result2+"<br> "+result3: 
+。fqlse): 


プラ ウザ で index.html を 表示 する と 、 上 か ら 順番 に 、「1248」 の 値 を 四捨五入 し た 値 、 切 り 
捨て た 値 、 切り 上 げた 値 が 表示 され ます 。 





mm 王 ビ ピロ T| 口 山 - ロ ワ 1 WW 四捨五入 / 切 り 捨 て / 切 り 上 げ を 行う 


請 証 界 和良 四捨五入 を 行う に は 「Math.round()」 メ ソ ッ ド 、 切り 捨て を 行う に は 
「Math.floor()」 メ ソ ッ ド 、 切り 上 げ を 行う に は 「Math.ceil)」 メ ソ ッ ド を 使う 


]avaScript で は 、 小数 点 以 下 の 処 理 を 行う メソ ッ ド が 3 つ 用 意 さ れ て いま す 。 四 捨 五 


入 す る 場合 は 「Mathround() 」 メ ソ ッ ド 、 切り 捨て る 場合 は | Math.Hoor( 」 メ ソ ッ ド 、 切 
り 上 げ る 場合 は | Math.ceil() 」 メ ソ ッ ド を 使い ます 。 


mai 画 昌 IN 細 較 その 他 の 切り 捨て 方 法 


「Math.jHoor() 」 に よる 切り 捨て 以外 に も 、 次 の 方 法 が あり ます 。 
















数 値 | 6 


数 値 





上 記 2 つ の 方 法 は 、 数 値 の 範囲 に よっ て 結果 が 異な り ま す 。「 | 0] は 32 ビ ッ ト 数 値 範 
囲 を 超え る と 「0」、 負数 の 場合 は 「1] と な り ま す 。「^^~」 の 場合 は 、32 ビ ッ ト 数 値 男 囲 を 
超え て も 正しく 切り 捨て 処理 が 行わ れ ま す 。 ゲー ム な ど で 高 速 化し た い 場合 に は 32 ビ ッ ト 
数 値 範囲 を 超え な いと いう 条件 で あれ ば 、「 | 0」 を 使う の が ほとん どの プラ ウザ を 通し て 
高速 に 処理 され ます 。 特に IE9 で は [MathjHoor() 」 の 20 一 30 倍 ほど 高速 に な り ま す 。 
Firefox で は 「Math.Hoor() 」 が 高速 な た め 、 わずか な 効果 し か 得 ら れ ま せん 。 


関連 項目 
@ 数 値 を \ 数 点 以下 n 桁 に する 芝生 科 な を みのる する 0. は を すま 4 の る 層間 は 導 雪 人 人 6: D. 163 





帳 拉 ・ 高 半 に に に 4 ミ m 
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LIE6 』Chrome Safari 5 1 Firefox 4 1 Opera11 1 iOS4 | Android2 IWP_ 


=1 ヨ PalmIN 旧 ルル ン 
目 然 対 数 の 値 を 求め る 


ここ で は 、 自然 対数 の 値 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<SCr1Pt src="]S/saqmple.]S "></scrtDpt> 
</hegd> 





<body> 
<OUt て Du キ ></OUt て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . qddEventLtstener("1ogd" 。 functton()t 


洋二 人 に に まきこ 4 こ e 


var ele = document.getElementsByTagName("output")[9] : 
// 2 ン 19 ま で の 対数 を 出力 
for(var 1=2: 1<=19: 1++){ 
// 対数 を 求め る 
var n = Math. tog①): 
// 結果 を 出力 
ele.tnnerHTML += 1 ユ +" =ー"+n+"<br>": 
} 
// 自然 対数 の 底 e の 値 を 表示 
ele.tnnerHTML += "自然 対数 の 底 e: "+Math.E+"<br>": 
// 2 の 自然 対数 値 を 表示 
ete.tnnerHTML += "2 の 自然 対数 :"+Math .LN2+"<br>": 
// 19 の 自然 対数 値 を 表示 
ele.innerHTML += "19 の 自然 対数 : "+Mgth.LN10: 
}, false): 


ブラ ウザ で index.html を 表示 する と 、「2」「10」 ま で の 自然 対数 の 値 と 、 e の 値 、 2 の 自然 
対数 の 値 、 10 の 自然 対数 の 値 が 表示 され ます 。 
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旭 ビ ロ T| 口 NN- ロ ワ 2 m 自然 対数 の 値 を 求め る 


2=0.6931471805599453 
3=1.0986122886681097 
| 4=1.386294361119890 
ぅ = 1.6094379124341002 
6 = 1.79175946922805> 


7 = 1.9459101490553132 

8 = 2.0794415416798357 

9= 2.1972245773362195 

10 = 2.302585092994046 

自然 対数 の 底 es: 2.718281828459045 
2 の 自然 対数 :0.6931471805599453 
10 の 自然 対数 :2.302585092994046 














3 折 然 対数 の 値 を 求め る に は 「Math.Iog)」 メ ソ ッ ド や 
「Math.E」 「Math.LN2」 「Math.LN 10」 を 使う 
]avaScript で 自然 対数 を 求め る に は 、「Math」log() 」 メ ノッ ド を 使い ます 。 また 、 使用 
頻度 の 高い 値 に 関し て は 、 次 の よう に 専用 の プロ パテ ィ が 用 意 さ れ て いま す 。 


2 の 自然 対数 値 










剛 ・ 吉 人 に に まこ:4 ェ ピ 

















2 を 底 と する e の 対数 値 
10 を 底 と する e の 対数 値 
自然 対数 の 底 e の 値 


数 値 
Math.LN10 10 の 自然 対数 値 


中 中 開 克 が 10 の 場合 の 対数 と 底 が ら の 場合 の 対数 を 求め る に は 
底 が 10 の 場合 の 対数 と 底 が 2 の 場合 の 対数 を 求め る に は 、 次 の よう に な り ま す 。 


1og,。x = Math.LOG19E * Math.1og(x) 
1og。x = Math.LOGZE * Math.1og(x) 


具体 的 な JavaScript の コー ド は 、 次 の よう に な り ま す 。 


// 底 が 19 の 対数 を 求め る 

var x = 109909: 

var log19x = Math.LOG19E * Math.1og(x): 
// 19 の 自然 対数 値 を 表示 

ele.tnnerHTML = 1og19x + "<br>": 

// 底 が 2 の 対数 を 求め る 

var x = 65536: 

vaqr logZx = Math.LOGZE * Magth.log(x): 





関連 項目 と ゅ | " 
e e の 累乗 を 求め る eo ……D.188 
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LIE6 』Chrome 1 Safari 5 | Firefox 4 1 Opera11 | iOS4 [ Android2 1WP 


Eb 4LJ1N・ に 7 


= の 替 乗 を 求め る 








ここ で は 、 JavaScript で の 自然 対数 の 底 e の 累 乗 計 算 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttle>SqmpLe</t1t1e> 
<SCrtPt Src="]S/sample.]S"></scrtpt> 
</head> 





<body> 
<OU モ Du キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 
wtndow.aqddEventListener("1ogd"。 function(){ 
// e の 累乗 を 出力 


documert.getElementsByTagName("output")[9] .innerHTML = Math.exp(3): 
+, faqtse): 


洋 両生 に に EK に 45Fe 





ブラ ウザ で index.html を 表示 する と 、 自然 対数 の 底 e を 累乗 (サン プル で は 3 乗 ) し た 値 が 
表示 され ます 。 


を - 自記 記 


20.085536923187668 


miaaml 下 6 の 累乗 を 求め る に は 「Math.exp()」 メ ソ ッ ド を 使う 


JavaScript で は 目 然 対数 の 底 の 値 で ある e の 累乗 は 「Math.exp () 」 メ ノッ ド で 計算 す 
る こと が で きま す 。| Math.exp() 」 メ ソ ッ ド の パラ メー タ は 1] つ で 、「1」 を 指定 する と 「el、| 
「7]」 で あれ ば 「e'」 と 同じ に な り ま す 。 









肉 連 項 日 ルル レト " 時 5 
還付 09 欄 潮 麗 全 2 かっ か ee22AML2E い 2 が 0200282M480C0022。3u42202 00 p.186 
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LIE6 1 Chrome 1 Safari 5 | Firefox 4 1 Opera11 | iOS4 」 Android 2 !WP_ 


5E 上 ロビ TIN- ロ ソ 人 4 


べき 乗 を 求め る 





ここ で は 、 べき 乗 (x の n 乗 ) を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<meta charset="utf-8"> 
<tt せ le>SqmpLe</t1tle> 
<SCPtDt Src="]S/sample .]S "></SCr1Dt> 
</heqd> 





<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow. aqddEventLtstener("tLogd"。 functton()1 

// 2 の 16 乗 を 求め る 

var n = Math.pow(2,。 16): 

// 値 を 出力 

document . getElLementsByTagName( "output") う [9] .1nnerHTML = n: 
}, false): 


内 ・ 両 和仁 に に PE に 45e 


ブラ ウザ で index.html を 表示 する と 、 2 の 16 乗 を 計算 し た 結果 が 表示 され ます 。 


=m 記 = に 画 べ さき 乗 計 算 を 行う に は 「Math.pow()」 メソッド を 使う 


JavaScript で べき 乗 (x の n 乗 ) を 計算 する に は 、「Mathpow() 」 メ ソノ ッ ド を 使い ます 。 2 
つ 目 の パラ メー タ に は 、 整数 値 以外 も 指定 する こと が で きま す 。 た と えば 、 1/2 を 指定 する 
と x の 平方 根 、 1/3 を 指定 する と x の 3 乗 根 と な り ま す 。 また 、 負数 を 指定 し た 場合 は x の -n 
乗 に な り ま す 。 計算 結果 が 範囲 を 超え て いる 場合 は 、| Infinity 」、 また は 、| -Infinity」 を 
返し ます 。 





に 平方 根 を 求め る 計測 あ 楓 ま 和 計 計 8 WW ず ま > よる まち ダ 光 各 は 水 消沈 梗 めす 六 者 みがき 信 店 す Weety の 60 を サボる ま 和 中 9'W90 汐 旭 き 人 か D. ] 9 
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浴 ・ 古 半 ま に に EK に 4Sm 
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LIE6 」Chrome 』 Safari 5 | Firefox 4 1 Opera 11 | iOS4 1 Android2 } WP 


=1 コ mmlmlNmy4= 
平 万 根 を 求め る 


ここ で は 、 平方 根 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tt 人 tte>SqamDLe</t1t1e> 
<SCPtDt src="]S/sample . ]S "></SCr1Dt> 
</head> 
<body> 
<OutDut></OUt て Dut> 
</Dody> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . oddEventLtstener("toad"。 functton(){ 
// 2<19 ま で の 平方 根 の 値 を 求め る 
for(var 1=2: 1<=1 の 0: 1++){ 
var n = Mgth.sqrtC1): // 平方 根 を 求め る 
document.getELementsByTagName( "output")[9] .1nnerHTML += 1+" ="+n+"<br>": // 結果 を 出力 


} 
+, fqlse): 


ブラ ウザ で index.html を 表示 する と 、| 2」 一 | 10」 ま で の 平方 根 の 値 が 表示 され ます 。 


2=1.4142135623730951 

3=1.7320508075688772 
4=2 

う =2.23606797749979 

6=2. 和 49489742783178 

7=2.6457513110645907 

8 =2.8284271247461903 

9=3 

10 = 3.1622776601683795 


HHNEP ロ INT 


JavaScript で 平方 根 を 求め る に は 、| Math.sqrt () 」 メ ソ ッ ド を 使い ます 。 パラ メー タ に は 
平方 根 を 求め た い 値 を 指定 し ます 。 また 、 2 の 平方 根 は 「Math'SQRT2」、2 の 平方 根 の 
半分 の 値 に つい て は | MathSQRT1_2」 と し て 「Math」 オ ブ ジ ェクト に 用 竜 さ れん て いま す 。 





関連 項目 ょ ゅ 
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LIE6 1 Chrome 』 Safari 5 | Firefox 4 1 Opera 11 1 iOS4 』 Android2 !WP 


員 技 MLJN・L2 ん 的 


乱数 を 求め る 


ここ で は 、 乱数 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttte>SampLe</t1tle> 
<SCrtpt src="]Ss/sample .]S"></SCP1Dt> 
</head> 
<body> 
<OUt て Du キ ></OutDut> 





</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow. addEventLtstener("tLoad"。 functton(){ 
// 乱数 を 19 回 発生 させ る 
for(var 1=9: 1<19・ 1++){ 
// 乱数 値 を 求め る 
var n = Math.random(): 
// 結果 を 出力 
document .getEtementsByTagName( "output")[9] .1nnerHTML += n+"<br>": 
} 
+, folse): 


導 近 ・ 語 半 に たま IE に 4se 


ブラ ウザ で index.html を 表示 する と 、 10 個 の 乱数 値 が 表示 され ます 。 


0.8860914147795744 
0.9578045791477162 
0.22883945280733703 
0.49898375318171256 


0.583968514819867 
0.735919624453351 
0.15188484605624536 
0.3511227258604673 
0.6053911886735087 
0.701746672247101 
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還 ビ ロ TI ロロ N- ロ ワ 6 m 乱数 を 求め る 


==l 下 司 数 を 求め る に は 「Math.random()」 メ ソ ッ ド を 使う 


JavaScript で 乱数 を 発生 させ る に は 、|「 Mathrandom () 」 メ ノッ ド を 使い ます 。 パラ 
メー タ は あり ませ ん 。| Mathrandom () 」 メ ソ ッ ド が 返す 値 は 、 0 以上 1 未満 の 小数 値 に 
な り ま す 。 発生 する 乱数 は 疑似 乱数 と な っ て いま す 。 また 、 発生 さき れる 乱数 の 種 (seed) 
を 指定 する こと は で きま せん 。 


mal 抽 四 2 に 間 較 整 数 値 の 乱数 を 求め る に は 


「 Math.random () 」 メ ソ ッ ド は 0 以上 1 未満 の 小数 値 を 返し ます が 、 場合 に よっ て は 整 
数 の 乱数 を 得 た いこ と も あり ます 。 

この 場合 、 32 ビ ッ ト 数 値 範 囲 内 で あれ ば 、 次 の よう に 、「 求め た い 乱数 値 の 値 +1」 を 
乗算 し た 後 、| | 0] と する こと で 整数 の 乱数 を 求め る こと が で きま す 。 次 の 場合 は 、0-9 
まで の 整数 の 乱数 値 を 求め ます 。 














Math.randomC) * 19 | の 







1 一 10 ま で の 乱数 値 で あれ ば 、 次 の よう に な り ま す 。 


(Math.random() * 19 | 9 の )+ 1 






な お 、 32 ビ ッ ト 範 囲 を 超え る 場合 は [| | 0] で は な く 、「MathjHoor() 」 メ ソ ッ ド か 「Math. 
cell() 」 メ ソ ッ ド 、 も し く は 、「^^」 を 使用 し ます 。 








Math.floor(Math. randomC) * 19) 
Math . cetL(Math . random() * 19) 
<~(Math . random() * 19) 
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LIE6 』Chrome ! Safari 5 | Firefox 4 1 Opera11 1 iOS4 | Android2 WP」 





作り の か て も アコ が 


[String] オブ ジェ クト を 生成 する / 
文 字 列 を 連結 する 


ここ で は 、| String] オ プ ジ ェ クト を 生成 する 方 法 と 文字 列 同士 を 連結 する に つい て 解説 し 
ます 。 
HTML(index.html) 


<!DOCTYPE html> 
<html> 





<head> 


<metq Charset="utf-8"> 





一 m <tttte>Sqmple</tttle> 
Uliy <SCPtDt Src="]S/Sqmple .]S"></scrtpt> 
コ </head> 
= 4 <body> 
駐 <OUt て Du キモ ></OUtDut> 
別 </body> 
正 </html> 
規 
表 
現 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("load"。 functton(){ 

var ele = document .getEtementsByTqgName( "output")[9] : 

// String オ プ ジ ェ クト を 生成 

var Str1 = new Strtng(): 

// 文字 列 と し て Z6 を 生成 し 、 5 を 連結 

var Str2 = new Strtng(76): 

Str2 = Str2 + 5: 

// 結果 を 出力 

ele.tnnerHTML = (str1 tnstanceof Strtng)+"<br> "+str2: 
+, faqtlse): 


ブラ ウザ で index.html を 表示 する と 、| String] オプ ジ ェクト の 生成 結果 が 表示 され ます 。 2 
行 目 は 、 文字 列 と 数 値 を 連結 し た 結果 が 表示 され ます 。 
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mg 王 ビ ビビ TI ロロ N- ロ ププ mW 「String] オ ブ ジ ェクト を 生成 する / 文 字 列 を 連結 する 


= 認 = ョ lm 下 「String] オ ブ ジ ェクト を 生成 する に は 「new String(」 や 「"」、「」 を 使う 


]avaScript で は 、「String」 オ ブ ジ ェクト を 使っ て 文字 型 の オブ ジェ クト を 生成 する こと が 
で きま す 。 文字 列 型 の オブ ジェ クト を 生成 する に は |new String( 」 と し ます 。| String」 
オプ ジェ クト を 生成 する 際 に パラ メー タ を 指定 する と 、 指定 され た パラ メー タ が 文字 列 と し 
て 生成 され ます 。 ま た 、「new String() 」 と し て 生成 し な く て も 「"」( ダ ブル クォーテーション ) 、 
また は 、「 | (シン グル クォーテーション ) を 使っ て 、 数 値 や 文字 を 囲 な こと で 文字 列 と し て 扱 
うこ と が で きま す 。 

な お 、 変数 の 型 を 調べ る 際 に | typeof」 演 算 子 を 使う と 、 文字 列 を 格納 し た 変数 や オ 


ブ ジ ェクト は [object」 を 返し ます 。 サン プル の よう に 「instanceof」 演 算 子 を 使え ば 、 生成 





元 の オブ ジェ クト を 示す 「String」 の 文字 が 返さ れ ま す 。 中 国 
文字 列 同士 を 連結 する 場合 に は 「+] 記号 を 使い ます 。 文字 列 と 数 値 を 連結 し た 9 
場合 に は 、 数 値 が 文字 に 変換 きれ 連結 きれ ます 。 た と えば 、["ab'+3」 と する と 、 結果 は n 
「ab3」 に な り ま す 。「"12"+31 も 文字 列 と 数 値 の 連結 に な る の で 「15」 に な ら ず 、「123] 文 
の 文字 列 に な り ます 。 
上 も 
規 
表 
トド 





mm 引 癌 に 開 け ロ ゲー トペ ベア の 文字 


サロ ゲー トペ ベア を 利用 し て いる 文字 は JavaScript で は 表示 で き な か っ た り 、 文字 数 が 
止 し く カ ウン ト さ れ ま せん 。 サロ ゲー トペ ア を 利用 し た 文字 を 表示 する に は 、 次 の よう に 処 
理 し ます 。 


wtndow .qddEventLtstener( "toad" , functton()t 
var ele = document.getElementsByTagName( "output")[9] : 
Var C1 = の xZ09Z13・ 
// 結果 を 出力 
ele.tnnerHTML = untConv(c1): 
+。 foqlse): 
// Untcode サロ ゲー トペ ア 文 字 を 表示 可能 な 文字 に 変換 
functton untConv(x){ 
X = X - の x199909: 
return String.fromCharCode(((x / 9x499) | の) + の xD899, (x % 9x499) + 9xDC909): 


} 


]avaScript で 文字 列 処理 を 行う 場合 、 サロ ゲー トペ ア を 利用 し た 文字 が 含ま れる 可 
能 性 が ある 場合 は 、 既存 の メソ ノッ ド や プロ パテ ィ は 期待 通り の 動作 で は な く な る た め 、 別 
途 、 処理 する 必要 が あり ます 。 サロ ゲー トペ ア を 利用 し て いる 文字 の 処理 方 法 に つい て 
は 、 次 の サイ ト を 参考 に し て くだ さい 。 

w 参考 サイ ト 


http://d.hatena.ne.jp/Ianguage_and_engineering/20120523/ 
LengthOfUnicodeStringVWithSurrogatePairs 
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mW EE ビ TI ロロ N- ロ ププ WW 「String]」 オ ブ ジ ェクト を 生成 する / 文 字 列 を 連結 する 


http://codezine.jp/article/detail/ 159g 
http://liosk.blog 103.fc2.com/blog-entry-162.html 


な お 、 サロ ゲー トペ ア を 利用 し て いる 文字 は 、 次 の よう に な り ま す 。 


丈 載 提 彼 替 臣 各 疾 志 換 汎 人 臨 入 了 辰 吾 披 券 礁 日 苫 了 自 壇 措 汰 衝 軌 殴 除 へ 壇 控 義 笠 誕 晶 障 価 素 知 


浮竹 航 ま 際 人 琴 状 油 電 艇 員 難 傑 安 虹 漆 窯 盤 距 就 作 尋 浸 答 術 第 和 信 媒 腰 漠 注 頸 催 妖 柳 混 笛 英 
軸 族 人 字 机 潤 長 功 人 谷 尿 配 畑 築 募 幸 養 敗 上 杭 贅 算 縮 迫 鱗 間 川 析 逐 箇 醸 訂 角 劉 大 系 卒 束 装 還 騨 約 
駅 槍 符 板 鵜 表 航 勘 由 桁 拓 谷 狐 氏 鯖 時 過 村 狂 料 蕎 地 能 還 剛 梓 潜 績 縮 狼 角 姓 梓 語 次 翻 釧 鱗 抽 桃 原 
棟 識 卒 鱗 叱 眺 相 骨 秩 壇 鉄 角 只 内 覆 穏 吾 錯 鱗 寺 都 枢 癌 絞 置 鉛 鱗 忠 嶋 楓 痺 還 靖 名 更 叶 質 禁 意 編 鐘 
玉 喘 農 梅 疹 細 神 銘 厳 距 床 業 大 統 社 鏡 間 園 癌 楓 畠 細 了 氏 夫 土 橋 昧 纏 被 鎖 鶴 恵 様 脱 還 福 鏡 第 坊 滴 
憲 上 正 筆 雛 球 考 本 権 映 六 密 鍋 敷 需 起 構 購 邊 視 負 崩 避 内 様 瞳 礎 到 針 客 坊 携 机 似 妥 褒 関 骨 堅 拓 桶 磯 有 
僅 閣 腸 





mial 叶 和 IN 上 較 | atin- | コー ド 表 


| charAt()」 メ ソ ッ ド や 「charCodeAt()」 メ ソ ッ ド 、「StringfromCharCode() 」 メ ノッ 
ド な ど で 使 用 され る Latin-1 コ ー ド 表 は 、 次 の よう に な り ま す 。 


上 位 ビ ッ ト 
「」0111213141516|718」 


や 
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=1 ゴ mamIN 由 ay4= 
文字 列 の 長 さ を 求め る 


ここ で は 、 文字 列 の 長き を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meto charset="utf-8"> 
<tttle>Samp Le</t1tle> 
<Scrtpt src="]S/sample .]S"></SCrtDt> 
</head> 
<body> 
<OUtDu キ ></OuUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow . addEventLtstener("1ogd" functton()+ 
var ele = document .getEtementsByTagName( "output")[9] : 
// 文字 列 を 変数 に 代入 
var str = "JaqvaScrtDpt": 
// 文字 列 の 長 さ を 求め る 
var n = str.Llength: 
// 結果 を 出力 
ele.innerHTML = str+" の 文字 列 の 長 さ :"+n: 
+, faqtse): 


ブラ ウザ で index.html を 表示 する と 、 文字 列 の 長 さ が 表示 され ます 。 


を B 1 
JavaScrpt の 又 字 列 の 長 さ : 10 











sN 呈 sl 画 駐 字 列 の 長 さ を 求め る に は 「length] プロ バテ ィ を 使う 


文字 列 の 長き を 求め る に は 、「length] プ ロ パ ティ を 参照 し ます 。 文字 は 日 本 語 で も 中 
国語 で も アラ ビア 語 で も 1 文字 を 「1] と し て カウ ント され ます 。 

な お 、 サロ ゲー トペ ア を 利用 し た 文字 の 場合 、 1 文字 で も 「2」 が 返さ れ ま す 。 文字 列 
に サロ ゲー トペ ア を 利用 し た 文字 が 含ま れる 場合 に は 別途 、 処理 が 必要 に な り ま す 。 詳 
し く は 、 195 ペ ー ジ を 参照 し て くだ さい 。 
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LIE6 』Chrome 』 Safari 5 | Firefox 4 1 Opera 11 1 iOS4 [ Android 2 1 WP 


らら ヒ 上 ヒビ じ 11 ロロ N- ロ ロワ 9 
文字 と 文字 コー ド を 変換 する 


ここ で は 、 文字 か ら 文 字 コ ー ド を 求め る 方 法 と 、 文字 コー ド か ら 文 字 を 生成 する 方 法 に つい 
て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<titte>Sqmple</t1t1e> 
<SCrtpt Src="]S/saqmple .]S"></scrtpt> 
</head> 
<body> 
<OutDut></OUtDUut> 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1ogd" functton(){ 
var ele = document.getEtementsByTqgName( "output")[9] : 
// 文字 列 を 変数 に 代入 
var str = "あい うえ お ": 
// 文字 数 だ け 繰り 返し 変換 
for(var 1=9: 1<str.tength: 1++){ 
// 文字 コー ド に 変換 
Var code = "の @x"+str.charCodeAt(1).toStrtng(16): 
// 結果 を 出力 
ele.tnnerHTML += code+"<br>": 
} 
ele.1nnerHTML += "<hr>": 
// 文字 コー ド か ら 文 字 に 変換 
for(code= の x41: code<= の 9x5q: code++){ 
// 文字 コー ド か ら 文 字 に 変換 
var str = Strting.fromCharCode(code): 
// 結果 を 出力 
ele.tnnerHTML += str: 
} 
}, fatse): 








m 王 ビ ロ 丁 | 口 N- ロ フワ 9 wm 文字 と 文字 コー ド を 変換 する 


ブラ ウザ で index.html を 表示 する と 、 文字 コー ド に 変換 し た 結果 と 、 文字 コー ド 順 に 文字 
を 表示 し た 結果 が 表示 され ます 。 


ABCDEFGHIHKLMNOPORSTUVWXYZ 


文字 を 文字 コー ド に 変換 する に は 「charCodeAt()」 メ ソ ッ ド 、 
文字 コー ド を 文字 に 変換 する に は 「String.fromCharCode()」 メ ソ ッ ド を 使う 


文字 か ら 文字 コー ド に 変換 する に は 、| charCodeAt() 」 メ ソ ッ ド を 使い ます 。 パラ メー 
タ に は 変換 し た い 文 字 の 位置 を 指定 し ます 。「0」 が 最初 の 文字 を 示し 、 以後 、1 ず つ 
増加 し ます 。 

文字 コー ド か ら 文 字 に 変換 する に は 、| StringjfromCharCode() 」 メ ソ ッ ド を 使い ま 
す 。 パラ メー タ に は 文字 コー ド を 指定 し ます 。| StringfromCharCode () 」 メ ソ ッ ド は 変 
換 し た い 文 字 コ ー ド の 数 だ け 、「,」 (カン マ ) で 区 切っ て 列記 する こと で 一 括 し て 文字 コー 
ド か ら 文 字 に 変換 する こと が で きま す 。 


miml 曽 BN 還 還 ツ 子 コード に つい て 


コン ピュ ー タ で 仕様 され る 文字 に は 「 文字 コー ド 」 が 割り 当て られ て いま す 。 文字 コー ド 
は 複数 の 種類 が あり 、 2012 年 現在 、 Web で 多く 利用 きれ て いる の は ASCII か UTF-8 
で す 。 他 に も 日 本 語 の 場合 Shitt JIS や EUC が あり ます 。 主 な 記号 と 英 数 字 は どの 文字 
コー ド で も 共通 し て いま す が 、 それ 以外 の 部 分 は HTML フ ァイル に 依存 し ます 。 同じ 文 
字 で あっ て も UTF-8 の 文字 コー ド で 保存 され て いる 場合 、 UTF-8 で の コー ド を 返し ます 。 
Shift JIS で あれ ば 、Shift JIS で の 文字 コー ド を 返す こと に な り ま す 。 


ロロ NEPUINT 
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LIE6 』Chrome 」 Safari 5 | Firefox 4 1 Opera 11 | iOS4 1 Android2 】WP 


=1 コ EiMlmIN 昌 ml=im 
文字 列 を 検索 する 


ここ で は 、 文字 列 か ら 完 全 に 一 致す る 文字 列 を 検索 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttle>Sqmple</t1tle> 
<SCrtpt src="]s/sqmple.]S "></scrtpt> 
</head> 
<body> 
< く OUtDut></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd" 。 functton(){ 
var ele = document.getEtLementsByTogNagme( "output")[9] : 
// 文字 列 を 変数 に 代入 
var myStrtng = "C,JavaScrtpt,Ruby,Python, Java,Dart,Lug,D": 
// 先頭 か ら 〕Javq の 文字 を 探す 
var Ptr1 = myStrtng.1ndexOfC "Java"): 
// 31 文 字 目 か ら Javg の 文字 を 探す 
var ptrZ = myStrtng.1ndexOf(C"Java" 。 39): 
// 文字 列 の 最後 か ら Java の 文字 を 探す 
Var Ptr3 = myStrtng. LastTndexOf("Java"): 
// 結果 を 出力 
ele.innerHTML = " 元 の 文字 列 :"+myString+"<br>": 
ele.tnnerHTML += "先頭 か ら 検索 :"+ptr1+"<br>31 文 字 目 か ら 検 索 :"+ptr2+"<br>": 
ete.innerHTML += "最後 か ら 検 索 :"+ptr3: 
+,。 faqlse): 


ブラ ウザ で ndex.html を 表示 する と 、 文字 列 か ら 「Java」 の 文字 を 検索 し た 結果 が 表示 さ 
れ ま す 。 


元 の 文字 列 : 
C 
先頭 か ら 検 索 : 2 


JPython.Java.Dart.Lua.D 


31 又 字 目 か ら 検 索 : -1 
最後 か ら 検索 :25 





mm 司 ビ ロ TI ロト NI- 口 日 口 m 文字 列 を 検索 する 


文字 列 の 検索 を 行う に は 
mM indexOf()」 メ ソ ッ ド や 「lastIndexOf()」 メ ソ ッ ド を 使う 


TavaScript で は 文字 列 の 検索 を 行う に は 、「indexOf( 」 メ ソ ッ ド や 「lastIndexOf() 」 
メソ ッ ド を 使い ます 。 

「indexOf() 」 メ ノッ ド は 文字 列 の 先頭 か ら 末 尾 に 向かっ て 検索 し 、| lastIndexOf(O」 メ 
ソ ッ ド は 文字 列 の 末尾 か ら 先 頭 に 向かっ て 検索 し ます 。 該当 する 文字 列 が 見 つか っ た 場 
合 は 、 文字 列 内 で の 先頭 か ら の 位置 を 返し ます (最初 の 文字 位置 は 「0])。 文字 列 が 見 
つか ら な か っ た 場合 に は 「-1」 を 返し ます 。 また 、「indexOfO」 メ ソ ッ ド 、|lastImdexOfO0」 メ 
ソ ッ ド と も 、 文字 列 の 検索 開始 位置 を 2 番目 の パラ メー タ で 指定 する こと が で きま す 。 2 番目 
の パラ メー タ を 省略 し た 場合 、「indexOf() 」 メ ノッ ド は 文字 列 の 先頭 か ら 、|「 lastIndexOf() 」 
メソ ッ ド は 文字 列 の 末尾 か ら 検 索 す る よう に 設定 され ます 。 

な お 、「indexOf() 」 メ ソ ッ ド と 「]astImdexOf(O 」 メ ソ ッ ド は 、 シリ アル サー チ で 、 文字 列 の 
先頭 、 また は 、 末尾 か ら 順 番 に 指定 され た 文字 列 が ある か を 調べ ます 。 より 複雑 な 検索 
を 行う 場合 に は 、 正 規 表現 を 利用 で きる 「match() 」 メ ノッ ド を 使い ます 。 | match() 」 メ ソ ッ 
ド に 関し て は 、 216 ペ ー ジ を 参照 し て くだ さい 。 単純 に 文字 列 を 検索 する 場合 は 、 シリ ア 
ル サ ー チ を 行う 「indexOf() 」 メ ソノ ッ ド や 「lastIndexOfO 」 メ ソ ッ ド の 方 が 高速 で す 。 


内 放 下 三 還 作 2 
@ 配列 要素 を 検索 する 本 0 ザ の か ジ 3 まお すさ しい 7 で YY もせ か や トト D. 134 
@ 正規 表現 を 使っ て 文字 を 検索 する ME gn D.216 





Em NIS】 ココ トコ マロ ロ 
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LIE6 』Chrome 1 Safari 5 Firefox 4 1 Opera11 | iOS4 」 Android2 1!WP 


=1 ゴ FMImIN 昌 ml=5 
文字 を 取り 出す 


ここ で は 、 文字 列 か ら 指定 し た 位置 に ある 文字 を 取り 出す 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metq charset="utf-8"> 
<tttle>SampLe</t1t1e> 
<SCrtDpt Ssrc="]Ss/sample .]S "></scrtpt> 
</head> 
<body> 
<OU 革 DU キモ ></OUtDU キ > 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oqd"。 functton(){ 





WT コ 間 RIN ど Mi コ 」 コ ン ロ ロ 


vaqr ele = document.getElementsByTagNgme( "output")[9] : 

// 文字 列 を 変数 に 代入 

var myStrtng = "JavaScrtpt": 

// 最初 の 文字 を 取り 出す 

var chr1 = myStrtng.charAt( の ): 

// 最後 の 文字 を 取り 出す 

var chr2 = myStrtng.charAt(myStrtng. 1ength-1): 

// 結果 を 出力 

ele.tnnerHTML = "最初 の 文字 :"+chr1+"<br> 最 後 の 文字 : "+chr2: 
}, false): 


プラ ウザ で index.html を 表示 する と 、 文字 列 の 最初 と 最後 の 文字 が 表示 きれ ます 。 
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生 王 ロ TI ロト NN - 口 日 1] m 文字 を 取り 出す 


miNImlNl 画 又 字 を 取り 出す に は 「charAt()」 メソッド を 使う 


文字 列 内 か ら 1 文 字 を 取り 出す に は 、「charAt() 」 メ ノッ ド を 使い ます 。 パラ メー タ に は 
取り 出す 文字 の 位置 を 指定 し ます 。 この 文字 の 位 連 は 、 最初 の 文字 が 「0」、 そ の 次 の 
文字 が 「1」 と な り 、 以後 、 1 ずつ 増加 し て いき ます 。 つま り 、 最初 の 文字 を 取り 出す 場合 
は | charAt(0)」、2 番 目 の 文字 を 取り 出す 場合 は 「charAt(1) 」 と な り ま す 。 な お 、 最 役 
の 文字 を 取り 出す に は 、 サン プル の よう に 、 文字 列 の 長 さ か ら 1 減 らし た 値 を 指定 し ます 。 
| charAt(-1) 」 の よう に 指定 し て も 最後 の 文字 を 取り 出す こと は で きま せん 。 

複数 の 文字 を 取り 出す 場合 は 、| substr() 」 メ ソ ッ ド や | substring( 」 メ ノッ ド を 使い ま 
す 。 また 、 正規 表現 を 利用 し て マッ チ す る 文字 を 取り 出す 方 法 も あり ます 。 


mml 引い 較 ツ 子 を 祥 字 コー ド で 取得 する に は 


文字 列 か ら 文字 で は な く 、 文字 コー ド で 取得 し た い 場 合 も あり ます 。 文字 コー ド で 取 
得する 場合 に は 、「charCodeAt() 」 メ ソ ッ ド を 使用 し ます 。 
た と えば 、 次 の よう に する と 、|「a」 の 文字 コー ド で ある | 97」 が 返さ れ ま す 。 





leE 交 Es ココ エコ マロ コロ 


"q" .CharCodeAt( の ) 





関連 項目 ょ ゅ 
し 指定 範囲 の 文字 を 抜き 出す と と て た ザ イオ で も パイン イ ザイ を と か で で: ネ で マシ ドリス アア を に ポポ た ん いだき で YS で ベ トップ に オ すす や か 7: D.C06 
@ 正規 表現 を 使っ て 文字 を 検索 する の いと を すか AS に し Y ・ D. ど 16 
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LIE6 Chrome Safari 5 | Firefox 4 ! Opera11 ! iOS4 ) Android 2 !WP_ 





=1 ゴ PalmIN 昌 ml= レ 
文字 列 を 指定 文字 で 分 割 す る 


ここ で は 、 文字 列 を 指定 文字 で 分 割 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq Charset="utf-8"> 


<tttle>SampLte</tttle> 





JavaScript の コー ド (sample.js) 


wtndow . qaddEventLtstener("lLoad" 。functton(){ 


ロ <SCrtDt Src="]S/sSample .]S"></SCr1Dt> 
上 
リン </head> 
* <body> 
a <OutDu キ ></OutDut> 
文 </body> 
ーー 
別 </html> 
止 
規 
表 
現 


var ele = document .getELementsByTagName( "output")[9] : 
// 文字 列 を 変数 に 代入 
var myString = "白藤 , 佐 藤 , 山 田 , 轟 , 小 鳥 遊 , 種 島 , 大 藤 , 伊 波 ": 
// , の 文字 で 分 割 
var myArray = myStrtng.SpL1t("。"。4): 
// 結果 を 出力 
for(var 1=9: 1<myArray.Length: 1 ユ ++){ 
var Str = myArray[1]: 
ele.tnnerHTML += str+"<br>"・ 
} 
ele.1nnerHTML += "<hr>": 
// 正規 表現 を 使っ て 「 参 藤 」, の 文字 を 削除 
var myArray2 = myStrtng.spLtt(/. 藤 /g): 
// 結果 を 出力 
for(var 1= の : 1<myArrayZ.Length: ュ ++){ 
var Str = myArray2[1] : 
ele.tnnerHTML += str+"<br>"・ 
} 
}, false): 


204 


m 王 ビ ピロ T「 口 ト NN - 口 日 2 文字 列 を 指定 文字 で 分 割 す る 


プラ ウザ で index.html を 表示 する と 、 文字 列 を 特定 文字 、 お よび 、 正規 表現 で 分 割 し た 
結果 が 表示 され ます 。 


山田 末 小 鳥 遊 竹島 . 
伊波 


=N ヨ ョ ョ Il 記 四 文字 列 を 指定 文字 で 分 割 す る に は 「split()」 メ ソ ッ ド を 使う 












文字 列 内 に ある 特定 の 文字 を 区 切り 文字 と し て 分 割 し 配列 に 格納 する に は 、| split 
() | メソ ッ ド を 使い ます 。「split() 」 メ ソ ッ ド の 最初 の パラ メー タ に は 、 区 切り 文字 を 指定 
し ます 。 分 割 す る 際 、 大 量 に 配列 デー タ が 生成 され ます が 、 個数 を 制限 し た い 場 合 に 
は 2 番目 の パラ メー タ に 最大 数 を 指定 し ます 。 た と えば 、「splitC 還 , 3)」 で あれ ば 、| 圏 」 
を 区 切り 文字 と し て 最大 3 つま で の 結果 が 返さ れ ま す 。 

また 、 固定 され た 文字 列 で は な く 、 柔軟 性 を 持た せ た い 場合 に は 、 正規 表現 文字 列 
を 「split() 」 の 最初 の パラ メー タ に 指定 する こと が で きま す 。 


関連 項目 ょ ゅ 
の 特定 の 文字 別 ] 婦 削除 す る 人 AH が 4: を あす の お る 二 へ 4 半 本 は 直 を D. の] ] 
「] [RegExD」 オブ ジェ クト 生成 する 良い W2 浅 WC% じ を も で 2 光生 A D. ら 1 3 


コ 昌 





毅 類 半田 ・ 演 導 E に EEE4SE 
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LIE6 』Chrome 』 Safari 5 | Firefox 4 1 Opera11 1 iOS4 ! Android2 1 WP 





らら に に 11LHN- ロ ロコ 


指定 雪 囲 の 文字 を 抜き 出す 


ここ で は 、 指定 男 囲 の 文字 を 抜き 出す 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttle>Sqmple</tttle> 
<SCrtpt src="]s/sample.]S"></scrtpt> 
</heqd> 


らら 


親 嘆 項 円 - 導 EE ま E に 4 ミ Sm 


<body> 


<OUtDU キ ></OutDut> 





</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oad" 。 functton(){ 

var ele = documernt.getElementsByTagName( "output")[9] : 

// 文字 列 を 変数 に 代入 

var myStrtng = "JavaScrtpt": 

// 3 文字 目 -5 文 字 目 の 文字 を 取り 出す 

var Str1 = myStrtng.substrtng(2。5): 

// 3 文字 目 か ら 最 後 ま で 取り 出す 

var' StrZ = myStrtng.substrtng(2): 

// 4 文字 目 か ら 5 文 字 分 を 取り 出す 

var Str3 = myStrtng.substr(3,。 5): 

// 文字 列 の 最後 か ら 3 文字 分 を 取り 出す 

var Sstr4 = myStrtng.Substr( -3): 

// 文字 列 の 最後 か ら 数 えて 2 一 4 文字 分 を 取り 出す 

var Str5 = myStrtng.sLtce(-4, -2): 

// 結果 を 出力 

ele.1tnnerHTML = "(1):"+str1+"<br>(2):"+str2+"<br>": 

ele.tnnerHTML += “(3):"+str3+"<br>(4):"+str4+ "<br>(5): "+str5: 
}, fgqlse): 


プラ ウザ で index.html を 表示 する と 、 同じ 文字 列 か ら 「substring()」 メ ノボ と 「substr()」 
メソ ッ ド を 使っ て 抜き 出し た 結果 が 表示 され ます 。 


(1):vaS 


(2): vaScript 
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還 ヒロ T| 口 山口 日 3 指定 範囲 の 文字 を 抜き 出す 


文字 列 を 抜き 出す に は 「substring()」 メ ソ ッ ド や 「slice()」 メ ソ ッ ド 、 
mM 央 「Substr()」 メソ ッ ド を 使う 


指定 範囲 の 文字 列 を 抜き 出す に は 、|substring() 」 メソ リッ ド や [|slice() 」 メソ ノッ ド 、 
[substr() 」 メ ソ ッ ド を 使い ます 。 文字 の 範囲 を 指定 し て 抜き 出す 場合 は | subtring() 」 
メソ ッ ド か | slice() 」 メ ノッ ド 、 文字 数 を 指定 し て 抜き 出す 場合 は 「substr() 」 メ ノッ ド を 使 
いま す 。 文字 の 位置 は 、 下 図 に 志す よう に 、 文字 を 挟む よう に な っ て お り 、 パラ メー タ に は 、 
この 範囲 を 指定 する こと に な り ま す 。 た と えば 、「substring(2. 5) 」 と する と 、 下図 の よう に 、 
3 文字 目 か ら 5 文字 日 まで が 抜き 出さ れ ま す 。 

「 substring() 」 メ ソ ッ ド は 、 負数 を 指定 し て 文字 列 の 末尾 か ら 抜き 出す こと は で きま せ 
ん 。 負数 を 指定 し て 末尾 か ら 抜き 出す に は 、|「slice() 」 メ ノド を 使い ます 。 | substrmg() 」 
メソ ッ ド も [slice() 」 メ ソ ツ ド も 、 最初 の パラ メー タ が 開始 位置 、 2 番目 が 終了 位置 に な り ま す 。 

「 substr () 」 メ ソ ッ ド は 、 最初 に 指定 し た パラ メー タ が 示す 文字 列 の 位置 か ら 、 2 番目 
に 指定 し た パラ メー タ 分 だ け 文 字 列 を 抜き 出し ます 。 また 、 最初 の パラ メー タ に 負数 を 指 
定 する と 、 末尾 か ら 抜 き 出 すこ と が で きま す 。 





人 で substring(2, 5) 人 で substring(2) 


01②34⑨678910 01②345678910 


辿 串 浴 田 改 EETTEEZEm 


2 て 5 の 範囲 分 終了 位置 を 省略 する と 文字 列 の 最後 まで 


人 で substr(3, 5) で substr(-3) 
0 1 2⑬4 5 6 7 8 9 10 0 1 2 3 4 5 6 7 8 9⑪⑩ 


但 slice(-4, -2) 


10938 ブ 3 主計 直 訂 1 0 





-4…-2 の 範囲 分 
関連 項目 ょ 」 | 
文字 を 取り 出す ………: 出 和 MUSBGSod630 和 ROMA4 > AtACURA4 本 AUOSSS Mo p.202 
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LIE6 」Chrome 』 Safari 5 | Firefox4 1 Opera11 1 iOS4 1 Android2 !WP」 





=1 コ FallN 昌 ml と | 
英文 字 の 大 文字 / 小 文字 に 変換 する 


ここ で は 、 英文 字 の 大 文字 / 小 文字 に 変換 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<tttle>Sqmpte</tttle> 
<SCrtDt src="]S/sqmple .]S"></scrtpt> 
</hegd> 
<body> 
<OUtDUt></OutDUt> 





</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . addEventLtstener("load" 。 functton(){ 





We 凍 WT 、 コ 」 コン ロコ 


var ele = document .getEtementsByTagName( "output")[9] : 
// 文字 列 を 変数 に 代入 
var myStrtng = "JavaqScrtpt": 
// 小文字 に 変換 
var str1 = myStrtng.toLowerCase(): 
// 大 文字 に 変換 
var Str2 = myStrtng .toUpperCase( ): 
// 結果 を 出力 
etle.1nnerHTML = str1+"<br>"+str2: 
+。 fgqltse): 


プラ ウザ で index.html を 表示 する と 、 小文字 に 変換 し た 結果 と 大 文字 に 変換 し た 結果 が 
表示 され ます 。 
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還 ビビ ピロ TI ロト NN - 口 日 4 mW 英文 字 の 大 文字 / 小 文字 に 変換 する 


ペペ メ を 小文字 に 変換 する に は 「toLowerCase()」 メ ソ ッ ド 、 
大 文字 に 変換 する に は 「toUpperCase()」 メ ソ ッ ド を 使う 


英文 字 は 、 大 文字 と 小文字 に 変換 する こと が で きま す 。 小文字 に 変換 する 場合 は 、 
| toLowerCase () 」 メ ソ ッ ド を 使い ます 。 大 文字 に 変換 する 場合 は 、| toUpperCase() 」 
メソ ッ ド を 使い ます 。 

な お 、 小文字 を 小さ い 大 文字 (スモ ー ル キャ ッ プ ス ) に する メソ ッ ド は 、 avaScript に は 
用 意 さ れん て いま せん 。 スモ ー ル キャ ッ プ ス を 表現 し た い 場 合 に は 、 CSS を 使っ て 行う 必要 
が あり ます (| font-variant」 に 「small-caps」 を 指定 する ) 


mml 引 中 に 間 間 王 崩 数 字 を 半角 数 字 に 変換 する 


全角 数 字 を 半角 数 字 に 変換 する に は 、 次 の よう に 正規 表現 の 「replace() 」 メ ソ ッ ド を 
使い ます 。「replace () 」 メ ソ ッ ド の 2 番目 の パラ メー タ に 関数 を 指定 し 、 その 関数 内 で 処 
理 す る こと で 全角 数 字 を 半角 数 字 に 変換 する こと が で きま す 。 





// 文字 列 を 変数 に 代入 

var srcStrtng ="4501234553335556789 を 半角 数 字 に する ": 

// 正規 表現 の reptaceC) を 利用 

var myArray = SrcString.reptace(/[ 0 - 9]/g, functitonCstr。p1,p2, offset,。 Ss){ 
return "0123456789".indexOfCstr): 

1 が " 

forCvar myString="", 1= の : 1<myArray.Length:i 1++){ 


親 呑 半田 ・ 改 潤 EE に 4 ミド 


myStrtng = myStrtng + myArray[1] : 





} 
関連 項目 ょ ゅ 
の 文字 の 形状 を 変更 する 1 半 が 二条 人 あ (9 人 0 和信 せ 6 009: 凍 すめ を か を の D.895 
る 英文 字 の 表示 形式 を 指定 する かな 池本 を みか る まな が ちよ かよ す 取る 4 流す 各 を あな 人 D.907 
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LIE9 』Chrome 1 Safari 5 Firefox 4 1 Opera11 ! iOS4 ! Android2 1 WP 





=1 ゴ PWMImIN 則 ml= に 
文字 列 の 前 後に ある 空白 を 削除 する 


ここ で は 、 文字 列 の 前 後に ある 空白 を 削除 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq Charset="ut 千 -8"> 


<tttte>SqmpLe</t1t1le> 





JavaScript の コー ド (sample.js) 


wtndow . oddEventLtstener("1oad"。 functton(){ 


<SCrtDt Src="]S/sample .]S "></sCr1Dt> 
T 
p </head> 
に <body> 
< く OUtDut キ ></OUtDUut> 
文 </body> 
co 
別 </html> 
止 
規 
表 
現 


var ele = document.getElLementsByTagNgme("output")[9] : 

// 文字 列 を 変数 に 代入 。 末尾 に は 全角 空白 が 2 つ あ る 

var SrcStrtng = " Joqva Scrtpt が 

// 前 後 の 空白 を 削除 

var myStrtng = SsrcStrtng .trtm(): 

// 結果 を 出力 

ele.innerHTML = myStrtng+"<br>"+escape(myStrtng): 
+。fqlse): 


ブラ ウザ で index.html を 表示 する と 、 前 後 の 空白 を 削除 し た 結果 が 表示 され ます 。 2 行 目 
は 結果 を わか りや すく する た め 、 空白 文字 エ スケ ー プ し て いま す 。 


Java Script 
「 Java96209%209620Scrnpt 


miaglml 画 又 字 別 の 前 後 の 空白 を 削除 する に は 「trim()」 メソッド を 使う 


人 力 さ れ た 文字 の 先頭 に ある 空 日 や 、 文 字 列 末尾 に ある 余計 な 空白 を 削除 する に は 、 
| trim り 」 メ ソ ッ ド を 使い ます 。 実際 に は 半角 や 全角 空白 だ け で な く 、 タブ 、 改行 コー ド 、 
制御 コー ド も 削除 対象 と な り ま す 。 





LIE6 Chrome 1 Safari 5 | Firefox 4 ! Opera11 | OS4 ! Android2 }WP 


ED じ DTIUHN- 口 6 


特定 の 文字 列 を 削除 する 


ここ で は 、 文字 列 の 中 か ら 特 定 の 文字 列 を 削除 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttle>Sample</t1tle> 
<SCrtDpt src="]S/Sammple.]S"></SCrtDt> 
</head> 
<body> 
<h3> 文 字 列 の 削除 </h3> 


<OUtDU キ ></OutDut> 





</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd"。 functton(){ 


EuFiilma 記 43 ココ ヨ ト ロ マロ ロ 





var ele = document.getEtementsByTagName( "output")[9] : 

// 文字 列 を 変数 に 代入 。 Bug の 文字 が 3 ヶ所 に ある 

var SsrcString = "BagBugBangBugCRLaboB1gBugCR": 

// Bug の 文字 を 削除 し た 後に 再度 連結 

var myString = srcStrtng.spLtt("Bug").]o1tn("" う : 

// 結果 を 出力 

ele.innerHTML = " 元 の 文字 列 :"+srcString+"<br> 削 除 後 :"+myString: 
+, faqtse): 


プラ ウザ で index.html を 表示 する と 、 文字 列 か ら 「Bug」 の 文字 列 を 削除 し た 結果 が 表示 
され ます 。 


| 文字 別 の 削除 


Net 
gBugBangBugCRLaboBigBugCR 
削 除 後 :BagBangCRLaboBigCR 
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WW 、 コ 」 コ コン ロロ 
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mW 王 ビ ロ T| 品 トト! - 口 日 6m 特定 の 文字 列 を 削除 する 


文字 列 を 削除 する に は 
請 細 詞 還 上 謀 「SplitO」 メ ソ ッ ド の バラ メー タ に 削除 し た い 文 字 を 指定 する 


JavaScript で は 文字 列 を 連結 する に は 、|+」 記 号 を 使い ます が 、 文字 列 を 引く メソ ッ ド 
は あり ませ ん 。 JavaScript で 文字 列 の 中 に ある 特定 の 文字 列 を 削除 する に は 、「split() 」 
メソ ッ ド を 使い ます 。「split() 」 メ ソ ッ ド の パラ メー タ に 削除 し た い 文字 列 を 指定 し ます 。 こ 
れ に より 、 指定 し た 文字 で 分 割 さ れ た 結果 が 配列 に 入り ます 。 この 段階 で 指定 し た 文字 
が な く な っ て いる こと に な る の で 、 後 は |join」 メ ノッ ド を 使っ て 配列 内 容 を 連結 し ます 。 こ 
れ で 指定 し た 文字 列 が 削除 され た 結果 を 得る こと が で きま す 。 


mml 瑞 に 較 較 ツ 子 別 の 数 を カウ ント する 


| split()」 メ ノッ ド を 使う と 文字 列 の 削除 (文字 列 の 引き 算 ) が で きま す が 、 正 規 表現 の 
| match() 」 メ ノッ ド を 使う と 削除 すべ き 該 当 文字 列 の 個数 を 求め る こと が で きま す 。 次 
の よう に する と 、 削除 すべ き |「 Bug」 の 文字 の 個数 を 表示 し ます 。 
















wtndow .qddEventLitstener("1ogd" 。 functton(){ 
var ele = document .getElementsByTagName( "output")[9] : 
// 文字 列 を 変数 に 代入 。 Bug の 文字 が 3 ヶ所 に ある 
Var SrcStrtng = "BagBugBangBugCRLaboBigBugCR" : 
// Bug の 文字 を カウ ント 
var n = SrcStrtng.moatch(/Bug/g) . Length: 
// 結果 を 出力 
ele.tnnerHTML = "削除 すべ き Bug の 数 :"+n: 
+。 foqlse): 











関連 項目 
ンー まる を 9 PSP 8 お CN p.204 
二 表 二村 症 作 oiE 必 天 友 暫 索 ある 0 しれ で も へ eetKWCGEKG24 rue sfvtkr9carsyt 20 p.216 


LIE6 ! Chrome ! Safari 5 | Firefox 4 1 Opera11 1 iOS4 1 Android2 』WP 





ロビ ビビ T11 品 N- 口 ロン 
[RegExp」 オ ブ ジ ェクト を 生成 する 


ここ で は 、 正規 表現 を 扱う | RegExp」 オ プ ジ ェ クト を 生成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<heqd> 
<meta charset="utf-8"> 
<tttte>SqmpLe</tttle> 
<SCrtpt src="]S/sampte .]S "></SCr1Dt> 
</head> 
<body> 


<OutDut></OutDut><hP> 





<OutDput></OutDput><hP> 
<Output></OutDut><hr> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.aqddEventLtstener("1oad" 。 functton()1 


親和 壮 田北 EE ま EE に 4 ミド 


var ele = document .getElementsByTagName( "output"): 

// 正規 表現 オプ ジェ クト を 作成 、 そ の 1 

var re1 = new RegExp("qbc"。"g1"): 

// 正規 表現 オプ ジェ クト を 表示 

ele[9] .1nnerHTML = re1: 

// 正規 表現 オプ ジェ クト を 作成 、 そ の 2 

Var re2 = /xyz/gLW: 

// 正規 表現 オプ ジェ クト を 表示 

ele[1] .tnnerHTML = re2: 

// 正規 表現 オプ ジェ クト か どう か 調べ る 

ele[2] .tnnerHTML = re2 instanceof RegExD: 
}, faqlse): 


ブラ ウザ で index.html を 表示 する と 、 生成 し た 正規 表現 オブ ジェ クト の 内 容 が 表示 され ま 
す 。 また 、 正規 表現 オブ ジェ クト か どう か を 調べ た 結果 も 表示 され ます 。 
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mW 王 ピ ロ 丁 | 口 ト ! - 口 日 ワ mw 「RegExp」 オ ブ ジ ェクト を 生成 する 


= ココ = ョ に 引 [ReEExXD] オブ ジェ クト を 生成 する に は 「new HegExp()」 と する 


JavaScript で は 、 正規 表現 を 使っ て 複雑 な 文字 列 検 索 を 行う こと が で きま す 。 正規 
表現 オブ ジェ クト を 生成 する に は 「new RegExp() 」 と し 、 パラ メー タ に は 正規 表現 の 文 
字 列 、 2 番目 の パラ メー タ に は オプ ショ ン を 指定 し ます 。 指定 で きる オプ ショ ン は 、 次 の 表 
の よう に な り ま す 。 


説明 
文字 列 全体 に わた っ て 検索 


英文 字 の 大 文字 小文字 を 無視 
複数 行 を 考慮 
また 、「new RegExp()」 を 使わ ず に 、 次 の よう に 「/」 と 「/」 で 囲ん で も 正規 表現 オプ 
ジェ クト を 生成 する こと が で きま す 。 








1 画 


親 味 共 円 ・ 演 導 注 EE に 48m 


/qbc/ 
/\\d/ 


この 場合 、 オプション は 最後 の 「/] の 後ろ に 指定 し ます 。 


/abc/g 
Nd\d/gtm 


misle に に 下 規 表 現 文字 の 一 覧 


正規 表現 文字 の 一 覧 は 、 次 の 表 の よう に な り ま す 。 


正規 表現 文字 












任意 文字 に マッ チ (改行 は 除く 









1 ミ 





末尾 に マッ チ 
空白 で 区 切ら れ た 単語 に マッ チ 
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mW ビ ピロ T| 口 ト N! - 口 ロワ m 「RegExp」 オ ブ ジ ェクト を 生成 する 


LWm 
に V 本 際 90NCRWO 
| Ns | 1 文字 の 区 切り 文字 ([YnvMwl]) に マッ チ ニー | 
| \NS | 区 切り 文字 以外 ([ mwuyl) の 1 文字 に マッ チ = 
に 無人 
| W | 揚 直 タプ 文字 に wa.ioru 誠 和 SE 
| WW _ . . . | 美 際 % 才 (209.) に Yo ま 。 aa 
に 人 字 ([A-Za-z0-9_ 

本 NE 字 列 ( 





こ 
ぶ 値 


NII 
Y 
\S 
\S 
\N 
\WW 
\W 
\W 
\ 支 
四 





グル ー プ 化 ( マ ッ チ デー タ は RegExp.$1 9 で 取り 出せ る ) 






また 、 パタ ー ン マッ チ の サン プル は 、 次 の よう に な り ま す 。 


31):([O-51[0-9])$ 






TIE 放 芝 < 蛋 ヨ エロ コマ ロコ 


Ad+$ すべ て 数 値 の 場合 に マッ チ (0123456789 
の み で 構成 され て いる ) 














アル ファ ベッ ト に マッ チ ( 大 文字 小文字 は 正 
規 表 現 の ij オ プシ ョ ン で も 指定 可能 /) 
mm/dd に マッ チ (た だ し 、 123/456 に も マッ 
チ す る の で 注意 ) 
yyyy/mm/dd に マッ チ (た だ し 、 1237459/ 
65/12349 に も マッ チ す る の で 注意 ) 
文字 が yyyy/mm/dd の み の 場 合 だ け に マッ 
チ (12345/65/123 に は マッ チ し な い ) 
時 間 の HH:MM に マッ チ (32:40 や 123:34、 
0:123 に は マッ チ し な い ) 
郵便 番号 に マッ チ (〒XXX-XXXX の よう に 






\d\d ハ \d 








[ 
wMdI41 ハ d12I ハ di22 
Ad14| ハ d121 ハ d12「$ 
([01]2[0-9] |2[0-3]):([0-5] [0-9] 
3 桁 と ハイ フン 区 切り の 4 桁 の 数 値 で 構成 さ 


^〒\d13|-\d14!$ 
lmeeves れ て いる ) 


平仮名 か 片仮名 に マッ チ 
[Nu3400Nu4DBFNu4E00-u9FFR\ 
uD840-NuD87FNuUDC00uDFFF\ 漢字 に マッ チ 
uF900uFAFF]+ 


『 正規 表現 を 使っ て 文字 を 検索 する よー デス スルスル D. の ] 6 
正規 表現 を 使っ て 文字 を 置換 する あき を w D. ら 1 












ハ 
ハ 
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LIE6 上 Chrome Safari 5 | Firefox 4 1 Opera 11 | iOS4 1 Android2 1WP」 


らら ED TIHUN- ロ 日 


止 規 表現 を 使っ て 文字 を 検索 する 


ここ で は 、 正規 表現 を 使っ て 文字 を 検索 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<t1tte>SqmpLe</t1tle> 
<SCrtDt Src="]S/sqmple.]S"></scrtpt> 
</hegd> 


コロ 


NN っ 」 コン トロ 


<body> 
<form> 
<tnput type="text" vglue="399 円 , 二 百 円 , 99 円 , 699 円 " stze="49" 1d="srcText"> 
<tnput type="button" vglue=" 検 索 " 1d="findBtn"> 
</form> 
< く OutDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oad"。 functton(){ 
// ボタ ン に イベ ント を 割り 当て 
document.getElementByTd("ftndBtn").qddEventLtstener("ctick"。functton()} 
// 検索 対象 文字 列 を 読み 出し 
Var text = documernt.getELementById("srcText") .vatue : 
// 正規 表現 で 検索 
var ttst = text.match( ハ \d131 円 /g): 
// 結果 を 表示 
var ele = document.getEtementsByTagNqme( "output")[9] : 
tf (Ltst){ 
// マッ チ す る 文字 列 が あっ た 場合 
for(var 1= の : 1<ltst.1ength: 1++){ 





ele.1tnnerHTML += ltst[1]+"<br>": 
} 
+eltse{f 
// マッ チ す る 文字 列 が な か っ た 場合 
ete.innerHTML = "該当 する 文字 列 は あり ませ ん で し た ": 
} 
}, false): 
}, false): 
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gm 己 ビ ロ T| 口 ト - 口 日 日 m 正規 表現 を 使っ て 文字 を 検索 する 


ブラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド に 検索 対象 文字 列 を 指定 し て | 検索 」 
ボタ ン を クリ ッ ク す る と 、 マッ チ し た 結果 が 表示 され ます 。 





300 円 . 二 百 円 . 90 円 .600 円 。 
300 円 
| 600 円 





マッ チ す る 文字 列 が な か っ た 場合 は 、 異な る メッ セー ジ が 表示 され ます 。 


1 円 . 二 理 円 .90 円 .90 円 。 
該当 する 文字 列 は あり ませ ん で し た 





= 紋 中 目 規 表現 を 使っ て 検索 する に は 「match()」 メ ソ ッ ド を 使う 


正規 表現 を 使っ て 検索 する に は 、「match() 」 メ ソ ッ ド を 使い ます 。 | match()」 メ ソ ッ 
ド の パラ メー タ に は 、 正規 表現 オブ ジェ クト を 指定 し ます 。 マッ チ す る 文字 列 が あっ た 場 
合 、 結 果 は 配列 で 返さ れ ま す 。 も し 、 マ ッ チ する 文字 列 が な か っ た 場合 に は 、| match)」 
は 「null」 を 返し ます 。 







内 話 引 三 邊 4 


e 配列 要素 を 検索 する ドド ドド ドド に p.134 
ゅ 文字 別 を 検索 する で ドド に eo ドーーー ボ ーーー p.200 
e [RegExp」 オ ブ ジ ェクト を 生成 する …… ド ieeeeeeoneoonooneooeornm… p.213 
e 正規 家 現 を 使っ て 文字 を 置換 する ドド ドド に トピ ドド ーー p.218 


ご ] 男 





親 中 半田 演 導 EE に FE に 4 ミド 
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LIE6 』Chrome 1 Safari 5 」 Firefox 4 1 Opera 11 1 iOS 4 1 Android2 1wP 


ら EDTIHN- 品 晶紀 


正規 表現 を 使っ て 文字 を 置換 する 


ここ で は 、 止 規 表現 を 使っ て 文字 を 置換 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 


<metq charset="utf-8"> 





<tttle>Sqample</tttle> 
ロ <SCrtDpt src="]S/sample . ]S "></scrtpt> 
= </head> 
0 <body> 

<form> 
文 <tnput type="text" vaqtue="399 円 , 二 百 円 ,。99 円 , 696 円 " stze="49" id="srcText"> 
FT <tnput type="button" vaqtue=" 置 換 1" td="repBtn1"> 
・ <tnput type="button" vaqlue=" 置 換 2" 1d="repBtn2"> 
指 </form> 
に く OUtDut キ ></OUtDut> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("1oad" functton(){ 

// 置換 1 ボタ ン に イベ ント を 割り 当て 

documert .getEtementById("repBtn1").addEventLtstener("cttck",。 functton(){ 
// 置換 対象 文字 列 を 読み 出し 
Var text = document.getElementById("srcText") .vqtue : 
// 正規 表現 で 置換 
var text = text.replace(/ 円 /g, "万 円 "): 
// 結果 を 表示 
document .getELementsByTagNagme("output")[9] .tnnerHTML = text: 

}, false): 

// 置換 2 ボタ ン に イベ ント を 割り 当て 

document .getElementById("repBtn2") .addEventLtstener("ctick",。Tfunctton(){ 
// 置換 対象 文字 列 を 読み 出し 
voar text = document.getELementBy1d("srcText").vqlue: 
// 正規 表現 で 置換 
var text = text.replace( 人 ハ d{1,3} 円 /9, functionCstr, ptr。 glLStr){ 

return parseTntCstr) + 75 + "円 ": 

}): 
// 結果 を 表示 
document .getELementsByTagName("output")[9] . 1nnerHTML = text: 

+,。 faqlse): 

},。 faqlse): 
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mm ビビ ロ T| ロト - 口 日 mW 正規 表現 を 使っ て 文字 を 置換 する 


ブラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド に 結 換 対象 文字 列 を 指定 し て 、[ 置換 
1 」 ボ タン を クリ ッ ク す る と 、| 円 」 が | 万 円 」 に 思 換 され ます 。 





300 円 . 二 百 円 . 90 円 .600 円 。 
300 万 円 . 二 百 万 円 . 90 万 円 . 600 万 円 





「 置換 2] ボ タン を クリ ッ ク す る と 、 マッ チ し た 数 値 に | 75」 が 加算 され た 結果 が 表示 され ます 。 





300 円 . 二 百 円 . 9 円, 600 幅 
375 円 . 二 百 円 . 165 円 . 675 円 





ml に lm 画 正規 表現 を 使っ て 文字 を 置換 する に は 「replace()」 メソ ッ ド を 使う 


正規 表現 を 使っ て 文字 を 置換 する に は 、| replace() 」 メ ソ ッ ド を 使い ます 。 | replace 

() 」 メ ソ ッ ド の 最初 の パラ メー タ に は 、 正規 表現 オブ ジェ クト を 指定 し ます 。 2 番目 の パラ 
メー タ に は 、 置換 する 文字 列 を 指定 し ます 。 

IE9 以 降 と 他 の プラ ウザ (Safari/Google Chrome/Firefox/Opera) で は 、| replace 」 
メソ ッ ド の 2 番目 の パラ メー タ に 関数 を 指定 する こと が で きま す 。 関数 か ら の 戻り 値 が 置換 
文字 列 と し て 処理 され ます 。 この 関数 に は 「 正 規 表 現 文字 列 の グル ー プ 指定 で ある 0 の 
個数 +3」 個 の 数 だ け パ ラメ ー タ が 渡さ れ ま す 。 3 つの パラ メー タ は | マッ チ し た 文字 」| マッ 
チ し た 位置 ]「 検索 対 象 文字 ] の 順番 に な り ま す 。 サン プル の よう に | 0) 」 に よる グル ー プ 指 
定 が な い 場 合 は 、「 マッ チ し た 文字 」| マッ チ し た 位置 」| 検索 対象 文字 ] が 渡さ れる こと に 
な り ま す 。 













関連 項目 ゅ 
@ |RegExD」 オブ ジェ クト を 生成 する 01 池本: な 68806 D. ど 13 
@ 正規 表現 を 使っ て 文字 を 検索 する を も 人家 大和 3 あ 光 26 % 0 測光 深 人 6 D. ど ] 6 





尊 川 半田 導 EE に EE に 4 ミド 
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LIE6 Chrome Safari 5 | Firefox 4 1 Opera 11 1 iOS 4 Android2 WP」 


=1 ヨ malmINm に jm 
[Date」 オ ブ ジ ェクト を 生成 する 


ここ で は 、| Date」 オ プ ジ ェ クト を 生成 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<heqd> 
<meto Charset="utf-8"> 
<tttlte>Sampte</t1ttte> 
<SCPtPt Src="]S/sample.]S"></scrtpt> 
</head> 
<body> 
<OUtDu キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oad" function(){ 





演 需 ご HE に EE に IE に 4 ミド 


var ele = document.getElementsByTagName( "output")[9]: 
// 現在 の 日 時 を 示す Dgte オ プ ジ ェ クト を 生成 

var date1 = new Date(): 

// 2913 年 2 月 15 日 を 示す Date オ プ ジ ェ クト を 生成 

var dote2 = new Date( "2913/2/15"): 

// 結果 を 出力 

ete.tnnerHTML = date1+"<br>"+dqte2: 


}+。 faqtse): 


ブラ ウザ で index.html を 表示 する と 、「 Date」 オ ブ ジ ェクト の 生成 結果 が 表示 され ます 。 


Mon Feb 6 00-36-52 UTC+0900 2012 
Fri Feb 15 00:00.00 UTC+0900 2013 
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mg 王 ビ ピロ 丁 | 口 N - 品 ロロ mw 「Date」 オ ブ ジ ェクト を 生成 する 


msIINl 画 日 付 を 扱う に は 「Date」 オ ブ ジ ェクト を 使う 


]avaScript で 日 付 を 扱う に は 、「Date」 オ プ ジ ェ クト を 利用 し ます 。「Date」 オ プ ジ ェ クト 
を 生成 する 際 に パラ メー タ を 指定 し な いと 、 生成 時 点 で の 日 時 情報 が 格納 され ます 。 パ 
ラメ ー タ に 日 付 や 時 間 を 示す 文字 列 を 指定 する と 、 その 日 付 情報 を 2 持つ オプ ジェ クト が 
生成 され ます 。 な お 、| Date」 オ ブ ジ ェクト を 文字 列 に 変換 し て 表示 し た 場合 、 プラ ウザ に 
よっ て 結果 が 異な り ま す 。 







関連 項目 





人 が NH26Yv408 和 8047RKeYY2nAOMINXCI02ROE24 cuN420209MRKi04 p.224 
本 か ON の 入 ca00MMMUtSECYNINMAGASKoiei p.226 
了 N い 2Mi2CA5ocu2x322 が oN2C12Pz082se:92 が atuvctul p.228 
交代 境 侍 千枝 衝 計 い ntO0PeKH も SEAMOUIMGMCOOARCNM4 p.230 ロロ 
外科 導電 の 2 は ao SH3H04AN NSRECCEYKdGRRZrNtMS2 p.234 E 
交 拉 特に 3 な.120tacdiRU3520k (ACNraldet p.236 
し っ に に の か He2 YASIT 笛 079 に p.238 人 
e 協定 世界 時 の 時 刻 を 設定 する / 時 華 を 求め る ……… ド ドド ドド ドー ドド ドド ドド ーー p.240 
付 
時 
刻 
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LIE6 1 Chrome 』 Safari 5 』 Firefox 4 1 Opera11 1 iOS4 I Android2 1 WP_ 


=1 ゴ mmlmlNBa に 』 
日 付 を 求め る 


ここ で は 、 日付 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<tttte>Samp Le</t1tle> 








<SCrtpt Src="]S/sqmple.]S"></scrtpt> 
</head> 
<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oad"。 functton(){ 





誠 穫 さま EK4 ミ ma 


var ele = document .getELementsByTagName( "output")[9] : 

// 現在 の 日 時 を 示す Date オ ブ プ ジ ェ クト を 生成 

var currentDate = new Date(): 

// 西暦 年 4 桁 を 読み 出し 

Var y = CurrentDote .getFulLLYear(): 

// 月 を 読み 出し 

Var m = CurrentDate .getMonth( ) + 1: 

// 日 に ち を 読み 出し 

Var d = currentDate . getDate( ): 

// 曜日 96) を 読み 出し 

var n = currentDate . getDay(): 

var day = "日 月 火 水木 金 土 ".chorAtCn): 

// 結果 を 出力 

ele.innerHTML = y+" 年 "+m+" 月 "+d+" 日 C"+day+")": 
+, fgqtlse): 


ブラ ウザ で index.html を 表示 する と 、 現在 の 日 付 が 表示 され ます 。 


を 
2012 年 2 月 6 日 (月 ) 
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生 ビビ ロ TI ロト NN! - 口 9 1 m 日 付 を 求め る 


日 付 を 読み 出す に は 
[getYear()」 メ ソ ッ ド や 「getDate()」 メソッド な ど を 使う 


TavaScript で 日 付 情報 を 読み 出す に は 、「Date」 オ プ ジ ェ クト を 生成 し ます 。 生成 時 
点 で の 日 付 を 取得 し た い 場 合 は パラ メー タ に は 何 も 指定 せ ず 、「Date」 オ プ ジ ェ クト を 生 
成 し ま す 。 特定 の 日 付 の 情報 を 得 た い 場合 に は 、「Date」 オ ブ ジ ェクト 生成 時 に 日 付 を 示 
す 文 字 列 を 指定 する か 、「setFullYear() 」 な どの メソ ッ ド を 使っ て 設定 し ます 。 生成 し た 
「Date」 オ ブ プ ジ ェ クト か ら 次 の メソ ッ ド を 使う こと で 日 付 情報 を 読み 出す こと が で きま す 。 な 
お 、 月 を 読み 出す 「getMonth() 」 メ ソ ッ ド は 実際 の 月 より も 「1」 少 な い 値 に な り ま す 。 


曜日 を 返す 。 曜日 は 0 一 6 まで の 数 値 で 次 の よう に 対応 し て いる 
0O: 日 曜日 
2 
2: 火 
getDay() 3: 水 曜日 
4: 木 曜日 
5: 金 曜日 
6: 土 曜日 


ロロ NEPOHINT 


関連 項目 bp 





e [Date」 オ ブ ジ ェクト を 生成 する …… パ tee D.62 の 
es 時刻 を 求め る or AAM p.226 
e 協定 世界 時 の 日 付 を 求め る … ド oo p.258 
e 協定 世界 時 の 時 刻 を 求め る or p.230 
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LIE6 Chrome 』 Safari 5 Firefox 4 』 Opera11 | iOS4 1 Android 2 1WP 


=1 コ mmlmlN 申 に レ 
時 刻 を 求め る 


ここ で は 、 時 刻 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<hegd> 
<meto Chagrset="utf-8"> 
<tttle>SampLe</t1t1e> 
<SCrtDt Src="]S/Sqmple .]S"></sCrtDt> 
</heqd> 
<body> 
<OuUtDut キ ></OutDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("tood"。 function(){ 
setTntervalt(functton()† 
var ele = document.getElLementsByTagName( "output")[9] : 
// 現在 の 日 時 を 示す Date オ プ ジ ェ クト を 生成 
Var currentDate = new Date(): 
// 時 間 (@-23) を 読み 出し 
var h = CurrentDate . getHours(): 
// 分 (9 て 59) を 読み 出し 
var mW = CurrentDate . getMtnutes( ): 
// 秒 9<59) を 読み 出し 
var S = CurrentDote .getSeconds( ): 
// ミリ 秒 (9…999) を 読み 出し 
var ms = CurrentDate .getMtlltseconds(): 
// 結果 を 出力 
ele.tnnerHTML = h+" 時 "+m+" 分 "+s+"."+ms+" 秒 ": 
+, 199): 
+, faqlse): 


ブラ ウザ で index.html を 表示 する と 、 現在 の 時 刻 が リア ル タ イ ム に 表示 され ます 。 


228 寺 52 分 55.618 秒 





和 mm 司 ビ ピロ T| 口 NN! - 口 2 wW 時 刻 を 求め る 


時 刻 を 読み 出す に は 
mW 識 「getHours()」 メソッド や 「getMinutes()」 メ ソ ッ ド を 使う 


TavaScript で 時 刻 を 読み 出す に は | Date」 オ プ ジ ェ クト を 生成 し ます 。 生成 時 点 で の 
時 刻 を 取得 し た い 場 合 は パラ メー タ に は 何 も 指 定 せ ず 、|「 Date]」 オ プ ジ ェ クト を 生成 し ま 
す 。 時 計 な どの リア ル タ イ ム に 時 刻 を 表示 する よう な 場合 は 、 そ の 都度 、|「new Date() 」 
と し て オブ ジェ クト を 生成 し 、 そ の オブ ジェ クト か ら 時 刻 を 読み 出す 必要 が あり ます 。 


「 Date 」 オ ブ ジ ェクト の 時 刻 に 関す る メソ ッ ド は 、 次 の 表 の よう に な り ま す 。 


メン ボボ 


getHours() 時 を 返す 。 24 時 間 制 な の で 0ー23 ま で の 整数 値 に な る 


getMinutes() 分 を 返す 。 0 て 59 ま で の 整数 値 に な る 
getSeconds () 秒 を 返す 。 0 て 59 ま で の 整数 値 に な る 
getMilliseconds() ミリ 秒 を 返す 。 0 て 999 ま で の 整数 値 に な る 





mml 画 昌 N 環 、 コ VSCrTiDt の 「Date」 オブ ジェ クト で 扱え る 日 付 の 限界 


TavaScript の 「Date」 オブ ジェ クト は 、 1970 年 1 月 1 日 午前 0 時 か ら の 秒 数 を 元 に し て 
処理 が 行わ れ ま す 。 これ は TavaScript 独 目 の 処理 で は な く 、 UNIX で 使用 きれ て いる 日 
付 / 時 刻 処 理 を 利用 し て いる た めで す 。 

この 時 刻 処 理 は 32 ビ ッ ト 長 で 秒 数 を カウ ント する た め 、 協定 世界 時 の 2038 年 1 月 19 昌 3 
時 14 分 7 秒 を 越え る と 止 し い 日 付 処理 が 行え を ない 間 題 が あり ます 。 







関連 項目 p ゅ 


@ [Date」 オブ ジェ クト を 生成 する を すす) アセ D. の の の 
き 日 付 を 求め る 0 ei な 介入:020749 人 46 wa た する 2000 人: の 人 の 科す な D. ら 4 
@ 協定 世界 時 の 日 付 を 求め る 光生 深江 Ao 6 et を な まな の 6 ら (信和 で D. の 28 
@ 協定 世界 時 の 時 刻 を 求め る oo Na 0W き 6 D.230 
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LIE6 Chrome 1 Safari 5 Firefox 4 ! Opera 11 1 iOS4 』 Android2 1 WP 


を 1 し 5 が 


協定 世界 時 の 日 付 を 求め る 


ここ で は 、 協定 世界 時 の 日 付 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta Charset="utf-8"> 
<tttle>Sample</t1t1e> 
<SCr1pt Src="]S/Sample.]S"></SCrtDt> 
</hegd> 
<body> 
< く OuUtDu キ ></OuDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . oddEventLtstener("Load" 。 functton(){ 





深 需 HH に に IE に 42 ミ Fe 


var ele = document.getEtementsByTagName( "output" )[9] : 

// 現在 の 日 時 を 示す Date オ プ ジ ェ クト を 生成 

var CurrentDate = new Date(): 

// 協定 世界 時 の 西暦 年 4 桁 を 読み 出し 

var y = CurrentDate.getUTCFuLLYear(): 

// 協定 世界 時 の 月 を 読み 出し 

var m = CurrentDote . getUTCMonthC() + 1: 

// 協定 世界 時 の 日 に ち を 読み 出し 

var d = currentDate . getUTCDate( ): 

// 協定 世界 時 の 曜日 96) を 読み 出し 

var n = CurrerntDate .getUTCDoay(): 

var day = "日 月 火 水木 金 土 " .charAtCn): 

// 結果 を 出力 

ete.tnnerHTML = y+" 年 "+m+" 月 "+d+" 日 C"+day+" う ": 
+, foqlse): 


ブラ ウザ で index.html を 表示 する と 、 現在 の 協定 世界 時 の 日 付 が 表示 され ます 。 


さっ ヨコ 
2012 年 2 月 8 日 ( 水 ) 
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W 選 ビ ビ ロ T| ロ NN - 口 ら コ m 協定 世界 時 の 日 付 を 求め る 


3 中 定 世界 時 を 読み 出す に は 「getUTCFuIIYear()」 メソッド や 
「getUTCDate()」 メソッド な ど を 使う 


]avaScript で 協定 世界 時 の 日 付 情報 を 読み 出す に は 、| Date」 オ ブ ジ ェクト を 生成 し ま 
す 。 生成 時 点 で の 協定 世界 時 の 日 付 を 取得 し た い 場 合 は パラ メー タ に は 何 も 指定 せ ず 、 
「Date」 オ プ ジ ェクト を 生成 し ます 。 特定 の 協定 世界 時 の 日 付 の 情報 を 得 た い 場 合 に は 、 
「Date」 オ ブ ジ ェクト 生成 時 に 日 付 を 示す 文字 列 を 指定 する か 、| setUTCFullYear() 」 
な どの メソ ッ ド を 使っ て 設定 し ます 。 生成 し た 「Date」 オ プ ジ ェ クト か ら 次 の メソ ッ ド を 使う こ 
と で 、 協定 世界 時 の 日 付 情報 を 読み 出す こと が で きま す 。 な お 、 協定 世界 時 の 月 を 読み 
出す 「getUTCMonth () 」 メ ノッ ド は 、 実際 の 月 より も 1 少な い 値 に な り ま す 。 
































AA 

| getUTCFullYear() | 協定 世界 時 の 西暦 年 4 桁 返す 

協定 世界 時 の 月 を 返す (実際 の 月 より も 1 少な い 値 を 返す ) 

協定 世界 時 の 日 に ち を 返す エ 
協定 世界 時 の 曜日 を 返す 。 曜日 は 0ー6 ま で の 数 値 で 次 の と 
よう に 対応 し て いる 。 e 
0 日 曜日 コ 
1: 月 曜日 「 

getUTCDay() 2: 火 曜日 肝 
3: 水 曜日 ・ 
4: 木 曜日 要 
5: 金 曜日 人 
6: 土 曜日 






mml 商 WIN 還 較 ブリ ーッ ジ 標 準 時 


協定 世界 時 は グリ ニッ ジ 標 準 時 と 同じ で す 。 協定 世界 時 で は UTC、 グリ ニッ ツジ 標 準 
時 で は GMT と 略 さ れ ま す 。 TavaScript の メソ ッ ド で も GMT の 名 残り が あり ます 。 


EEE | 





e [Date」 オ ブ ジ ェクト を 生成 する …… の ドド に ir D.22 の 
e 日 付 を 求め る パー ドド p.224 
e 時刻 を 求め る ……ー ド ドド ドド に に ドド ドド ドー ドー p.226 
e 協定 世界 時 の 時 刻 を 求め る ーー ドド ドド ドド に に ドド p.230 
e グリ ニッ ジ 標 準 時 友 求 め る の の … の ドド ドド ドド ドド ドド ドド p.244 


229 








"9 ロ 


半 頃 ・ 康 山 ココ エコ マロ ロ 


に 


230 


LIE6 』Chrome Safari 5 】 Firefox 4 』 Opera11 | iOS4 | Android2 1 WP」 


ご 1 = 間 時 軍 較 男 に 田 ト ニル っ 


誠 定 世界 時 の 時 刻 を 求め る 


ここ で は 、 協定 世界 時 の 時 刻 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttle>Sqmple</t1t1e> 
<SCcrtDt src="]S/sample.]S"></scrtDpt> 
</head> 
<body> 
<OUt て Du キモ ></OutDput> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd" 。 functton(){ 
setInterval(functton(){ 
var ele = document.getELementsByTagName( "output")[9] : 
// 現在 の 日 時 を 示す Date オ ブ プ ジ ェ クト を 生成 
var currentDate = new Date(): 
// 協定 世界 時 の 時 間 (@-23) を 読み 出し 
var h = currentDate . getUTCHours(): 
// 描 定 世界 時 の 分 (959) を 読み 出し 
Var mW = CurrentDate . getUTCMtnutes(): 
// 協定 世界 時 の 秒 (959) を 読み 出し 
var S = currentDate .getUTCSeconds(): 
// 協定 世界 時 の ミリ 秒 C9 の 999) を 読み 出し 
Var ms = CurrentDate .getUTCMtllLiseconds(): 
// 結果 を 出力 
ele.tnnerHTML = h+" 時 "+mr" 分 "+s+"."4ms+" 秒 ": 
+, 199): 
+, fglse): 








m ビ ピロ TI 口 N- ロ ワオ ョ m 協定 世界 時 の 時 刻 を 求め る 


ブラ ウザ で index.html を 表示 する と 、 現在 の 協定 世界 時 の 時 刻 が リア ル タ イ ム に 表示 され 
ます 。 


13 時 57 分 $1.434 秒 









本 電界 較 還 協定 世界 時 の 時 刻 を 読み 出す に は 「getUTCHours り 」 メ ソ ッ ド や 
「getUTCMinutes()」 メソ ッ ド な ど を 使う 


]avaScript で 協定 世界 時 の 時 刻 を 読み 出す に は 、「Date」 オブ ジェ クト を 生成 し ま 
す 。 生 成 時 点 で の 協定 世界 時 の 時 刻 を 取得 し た い 場 合 は パラ メー タ に は 何 も 指定 せ ず 、 
「Date」 オ プ ジ ェ クト を 生成 し ます 。「Date」 オ プ ジ ェ クト の 協定 世界 時 の 時 刻 に 関す る 
メソ ッ ド を 次 の 表 に 示し ます 。 日 本 の 場合 、 協 定 世界 時 より も 9 時 間 進 ん だ 時 刻 に な り ま す 
(日 本 か ら 見 れ ば 協定 世界 時 は 9 時 間 前 の 時 刻 に な る ) 。 


協定 世界 時 の 時 を 返す 。 24 時 間 制 な の で 0ー23 ま で の 










メソ ッ ド 















getUTCHours () 整数 値 に な る 
協定 世界 時 の 分 を 返す 。 0 て 59 ま で の 整数 値 に な る 
getUTCSeconds () 協定 世界 時 の 秒 を 返す 。 0 て 59 ま で の 整数 値 に な る 


getUTCMilliseconds() 協定 世界 時 の ミリ 秒 を 返す 。 0 て 999 ま で の 整数 値 に な る 





関連 項目 ょ ゅ 


e [Date | オブ ジェ クト を 生成 する …… の iiiomrrrrrerrererrererrrrr D. の 2 の 
e 日 付 を 求め る ドド oe p.224 
e 時 刻 を 求め る tee p.226 
@ 協定 世界 時 の 日 付 を 求め る …… ド ドド p.228 
e グリ ニッ ジ 標 準 時 を 求め る ire p.244 





舌 希 HE に に EK4 ミ は 
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LIE6 』Chrome 」 Safari 5 Firefox 4 1Opera 11 | iOS 4 I Android2 1WP_ 





5 ら E ビ 5 に 1 唱 N- 品 95 


1870 年 1 月 1 日 午前 0 時 0 分 0 秒 か ら 
揚 定時 まで の 経過 ミリ 秒 を 求め る 


ここ で は 、 現在 の ミリ 秒 や 特定 の 日 付 で の ミリ 秒 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metq charset="utf-8"> 
<tttle>SqmplLe</t1t て le> 
<SCrtDpt Src="]S/sqmple.]S"></scrtpt> 
</head> 
<body> 
<OuDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oqd" 。 functton(){ 
var ele = document .getEtLementsByTagName( "output")[9] : 
// 現在 の 日 時 を 示す Date オ プ ジ ェ クト を 生成 
var CurrentDate = new Doate(): 
// 1979 年 1 月 1 日 か ら 現 時 点 ま で の 経過 ミリ 秒 を 読み 出し 
var msec1 = CurrentDate .getTtme(): 
// 1979 年 1 月 1 日 か ら 2913 年 2 月 15 日 9 時 1 分 2 秒 ま で の 経過 ミリ 秒 を 読み 出し 
Var msec2 = Dgte.UTC(2913, 2, 15, 9, 1, 2): 
// 1979 年 1 月 1 日 か ら 現 時 点 ま で の 経過 ミリ 秒 を 読み 出し 
Var msec3 = Date.now( ): 
// 結果 を 出力 
etle.tnnerHTML = msec1+"<br>"+msec2+"<br> "+mSec3: 

}。 faqlse): 


ブラ ウザ で index.html を 表示 する と 、 指定 時 まで の ミリ 秒 が 表示 され ます 。 


1328896165786 
| 1363305662000 
1328896165786 





mg 呈 ビ ピロ T| ロ NII - 口 5 mw 1970 年 1 月 1 日 午前 0 時 0 分 0 秒 か ら 指 定時 まで の 経過 ミリ 秒 を 求め る 


経過 ミリ 秒 を 取得 する に は 
[Date.now()」 や 「getTime()」 メ ソ ッ ド を 使う 


]avaScript で は 、 1970 年 1 月 1 日 午前 0 時 0 分 0 秒 か ら 指 定時 まで の 経過 ミリ 秒 を 求め 
る こと が で きま す 。 現時 点 ま で の 経過 ミリ 秒 は 、「Datenow () 」 と し て 求め る こと が で きま 
す 。 た だ し 、「now () 」 メ ソ ッ ド は 、 IE6 な どの 古い ブラ ウザ で は サポ ー ト され て いま せん 。 


ロ NEPOHINT 


「now() 」 メ ノッ ド と 同様 に 、 現時 点 ま で の 経過 ミリ 秒 を 求め る に は 、「Date」 オ プ ジ ェ クト 
の 「getTime() 」 メ ノッ ド を 使い ます 。「Datenow()」 と 比べ て 、| Date」 オプ ジェ クト を 
生成 する 手間 が か か り ま す 。 

また 、 日 付 や 時 間 を 指定 し て 経過 ミリ 秒 を 求め た い 場合 に は 、「Date.UTCO 」 メ ノッ ド 
を 使い ます 。 パラ メー タ に は 年 月 日 、 時 分 秒 を 指定 し ます 。 





関連 項目 
e [Date」 オ ブ ジ ェクト を 生成 する …… ド io p.252 
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LIE6 』Chrome 』 Safari 5 | Firefox 4 | Opera 11 1 iOS4 I Android2 1WP_ 


=1 ヨ mmlmlN 申 a に 】= 
日 付 を 設定 する 


ここ で は 、 日付 を 設定 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metqg Charset="utf-8"> 
<tttle>SampLe</t1t1e> 
<SCP1pt Src="]S/sample.]S "></scrtpt> 
</head> 
<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.gddEventLtstener("1ogd"。 functton(){ 








党 需 HH に EEE に 4Se 


var ele = document.getEtementsByTagName( "output")[9] : 
// 現在 の 日 時 を 示す Date オ プ ジ ェ クト を 生成 
Vor currentDate = new Date(): 
// 2913 年 2 月 15 日 に 設定 
currentDate . setFulLYegr(2913): 
currentDate . setMonth(1): 
currentDate . setDate(15): 
// 上 曜 日 を 読み 出し 
var dw1 = "日 月 火 水木 金 土 " .charAtCcurrentDate.getDgay()): 
// 日 付 を 指定 し て Date オ プ ジ ェ クト を 生成 
Var myDagte = new Date("2914/2/15"): 
// 曜日 を 読み 出し 
var dw2 = "日 月 火 水木 金 土 " .chorAtCmyDgte .getDay()): 
// 結果 を 出力 
ete.tnnerHTML = "2913 年 2 月 15 日 は "+dw1+" 曜 日 で す 。 <br>": 
ele.tnnerHTML += "2914 年 2 月 15 日 は "+dw2+" 曜 日 で す 。 ": 
}, false): 


プラ ウザ で index.html を 表示 する と 、 設定 し た 日 付 の 曜日 が 表示 され ます 。 


| 2013 年 2 月 15 日 は 金曜 日 で す 。 


2014 年 2 月 15 日 は 土曜 日 で す 。 
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mm 王 ビ ビ ロ TI ロ N- 品 96 m 日 付 を 設定 する 


日 付 を 設定 する に は 
品 si 呈 [SetFuIIYear()」 「setMonth()」 「setDate()」 メ ソ ッ ド を 使う 


]avaScript で は 、 生成 し た 「Date」 オ プ ジ ェ クト に 用 意 さ れ た メソ ッ ド を 使う こと で 日 付 
を 生成 する こと が で きま す 。 日 付 を 設定 で きる メソ ッ ド は 、 次 の 表 の よう に な り ま す 。 


西暦 年 4 桁 
月 。「0」 が 1 月 を 示し 、「1 1 」 で あれ ば 12 月 を 示す 
() 


パラ メー タ は 、 範 囲 を 超え た 場合 で も エラ ー に は な り ま せん 。 た と えば 、「setMonth (12) 」 
と する と 、 次 の 年 の 1 用 こ に 設定 され ます 。 日 に ちゃ 同様 で |「setDate(60) 」 と する と 、 60 日 先 
の 日 付 が 設定 され ます (負数 も 使用 で きる ) 。 日 付 の 設定 メソッド は 、 生成 し た 日 時 に よっ て 
は 期待 通り 設定 され な いこ と が あり ます 。 この よう な 場合 は 、 サン プル の よう に 「Date」 オ ブ 
























ジェ クト を 生成 する 際 に 日 付 文字 列 を 設定 し ます 。 
コ 

EE n 
@ [Date」 オブ ジェ クト を 生成 する 8 2 84 人 (も 人 当選 D. の どの 日 
e 時 刻 を 設定 する ドー EK p.236 付 
e 協定 世界 時 の 日 付 を 設定 する ……ー ド | ドド ir Dp.238 時 
e 協定 世界 時 の 時 刻 を 設定 する / 時 差 を 求め る … の 0 ireeeoeoeeooeoooneoneonoornwen… p.240 刻 
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LIE6 Chrome 1 Safari 5 Firefox 4 1 Opera 11 | iOS4 | Android2 I WP 


に 1 ヨゴ FiMlmIN 旧 am に レ / 
時 刻 を 設定 する 


ここ で は 、 時 刻 を 設定 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttLe>SqmpLe</t1tte> 
<Scr1Dpt src="]S/sqmple .]S "></sCrtpt> 
</head> 
<body> 
<OUtDut キ ></OuUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd"。 functton(){ 





深 需 ・ 全 HH EE に EE4Se 


var ele = document.getElementsByTagName( "output") う [9] : 
// 現在 の 日 時 を 示す Date オ プ ジ ェ クト を 生成 
var currentDate = new Date(): 
// 12 時 93 分 45.678 秒 設定 
currentDoate . setHours(12): 
currentDate . setMtnutes(3): 
currentDate . setSeconds(45): 
currentDate . setMtLltseconds(678): 
// 時 間 を 指定 し て Date オ プ ジ ェ クト を 生成 
var myDate = new Date("Saqt Feb 15 2913 12:93:45 GMT+9999 (JST)"): 
// 結果 を 出力 
ele.tnnerHTML = currentDate+"<br>": 
ele.1nnerHTML += myDate: 

}, false): 


ブラ ウザ で index.html を 表示 する と 、 設定 し た 時 刻 の 「Date」 オブジェ クト 情報 が 表示 され 
ます 。 な お 、| Date」 オ プ ジ ェ クト を 文字 列 に 変換 し て 表示 し た 場合 、 プラ ウザ に よっ て 結果 が 
異な り ます 。 


Sat Feb 11 12-03-45 UTC+0900 2012 
Fn Feb 15 12-03-45 UTC+0900 2013 
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mg 王 ロ T| 口 NN - 口 7 m 時 刻 を 設定 する 


時 刻 を 設定 する に は 
mMMl 「setHours()」 メ ソ ッ ド や 「setMinutes()」 メソッド な ど を 使う 


]avaScript で は 、 生成 し た 「Date」 オ プ ジ ェ クト に 用 意 さ れ た メソ ッ ド を 使う こと で 時 刻 
を 生成 する こと が で きま す 。 時 刻 を 設定 で きる メソ ッ ド に は 、 次 の 表 の よう に な り ま す 。 


パラ メー タ は 、 範囲 を 超え た 場合 で も エラ ー に は な り ま せん 。 た と えば 、| setMinutes 
(90) | と する と 、「Date」 オブジェ クト で 示さ れる 時 刻 に 90 分 が 加算 きれ ます 。 これ は 他 
の メソ ッ ド で も 同様 で す 。 正 数 だ け で な く 負 数 も 指定 で きま す 。「setSeconds(-100)」 だ 








と 100 秒 前 に 設定 され ます 。 由 画 
また 、 日 付 と 時 刻 を 同時 に 設定 し た い 場合 は 、 サン プル の よう に 、| Date」 オ プ ジ ェ クト 3 
を 生成 する 際 に 日 付 と 時 刻 を 示す 文字 列 を 設定 し ます 。 n 
日 |C 
関連 項目 ょ ゅ 9 付 
e [Datel」 オ ブ ジ ェクト を 生成 する ……… の ii ANN 10 Nord の 訂 1 。 
@ 日 付 を 設定 する eo で 放 沈 放せ SN お kW0kaww D の 34 
e 協定 世界 時 の 日 付 を 設定 する …… ド ドド ET p.238 
全 協定 世界 時 の 時 刻 を 設定 する / 時 差 を 求め る 時 9 作れ を イサ p.40 
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LIE6 』Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS4 』 Android2 1 WP 


JILIITN- ロ ロビ 


協定 世界 時 の 日 付 を 設定 する 


ここ で は 、 舌 定 世界 時 の 日 付 を 設定 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metq charset="utf-8"> 
<t1ttle>SqmpLe</t1tle> 
<SCrtDt src="]S/sampte.]S "></sCrtDt> 
</head> 
<body> 
<OUtDu キ ></Out て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . qddEventLtstener("1oqd"。 functton(){ 








洋 害 HH EE に IWEK42 ミ Sm 


var ele = documernt.getElementsByTagName( "output")[9] : 
// 現在 の 日 時 を 示す Date オ ブ ジ ェクト を 生成 
var currentDate = new Date(): 
// 2913 年 2 月 15 日 に 設定 
CurrentDate . setUTCFuLLYeqr(2913): 
currentDgte . setUTCMonth(1): 
CurrentDate . setUTCDate( 15): 
// 曜日 を 読み 出し 
var dw = "日 月 火 水木 金 土 " .chgrAtCcurrentDate .getUTCDay()): 
// 結果 を 出力 
ele.innerHTML = "2913 年 2 月 15 日 は "+dw+" 曜 日 で す 。 ": 

}, faqlse): 


ブラ ウザ で index.html を 表示 する と 、 設定 し た 協定 世界 時 の 日 付 の 曜日 が 表示 され ます 。 


2013 年 2 月 15 日 は 金曜 日 で す 。 
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m 王 ビ ビ ピ TI ロト NI- 口 9 日 mW 協定 世界 時 の 日 付 を 設定 する 


協定 世 界 時 の 日 付 を 設定 する に は 「setUTCFuIIYear()」 
[setUTCMonth()」 「setUTCDate()」 メ ソ ッ ド を 使う 


TavaScript で は 、 生成 し た [Date」 オブジェ クト に 用 意 さ れん た メソ ッ ド を 使う こと で 協定 
世界 時 の 日 付 を 生成 する こと が で きま す 。 協定 世界 時 の 日 付 を 設定 で きる メソ ッ ド は 、 次 
の 表 の よう に な り ま す 。 


ES 


西暦 年 4 桁 


月 。「0」 が 1 月 を 示し 、「1 1 」 で あれ ば 12 月 を 示す 
パラ メー タ は 、 範囲 を 超え た 場合 で も エラ ー に は な り ま せん 。 た と えば 、「setUTCDate 
(12) 」 と する と 、 次 の 年 の 1 月 が 設定 され ます 。 日 に ちゃ 同様 で 、「setUTCDate(60) 」 と 
する と 、 60 日 先 の 日 付 が 設定 され ます (負数 も 使用 で きる ) 。 








ー 

関連 項目 ゅ 
内 「Date」 オブ ジェ クト を 生成 する FN の 衝 D. ど の の n 
十 2 拓 時 DMCAYvd0 に 37k44c406 00 人 Namt2t か sfYEESYrSu を 2 3 p.234 = 
e 1 時期 半 且 天 時 あい 00 TMUdi APIeeAAtKACSRAAuu4ci 1 講 間 の 0N p.236 付 
e 協定 世界 時 の 時 刻 を 設定 する / 時 差 を 求め る … ホ ※ ド ドド ーー ドド ーー ドーーーーーー p.240 時 
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洋 需 ・I に EEE に 4 ミ e 
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LIE6 』 Chrome Safari 5 | Firefox 4 | Opera11 』 iOS4 』 Android2 1 WP 





Ss tlL1IN- ロ ラマ 


協定 世界 時 の 時 刻 を 設定 する / 時 差 を 求め る 


ここ で は 、 協定 世界 時 の 時 間 を 設定 する / 時 差 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE htmtl> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>SqmpLe</t1t1e> 
<SCrtDt src="]S/sqmple.]S"></SCr1Dt> 
</head> 
<body> 
<OU モ Du キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("toqd" functton()+ 
var ele = document .getElementsByTogName( "output")[9] : 
// 現在 の 日 時 を 示す Date オ プ ブ ジ ェクト を 生成 
var currentDate = new Date(): 
// 12 時 93 分 45.678 秒 設定 
currentDate . setUTCHours(12): 
currentDate . setUTCMtnutes(3): 
currentDate . setUTCSeconds(45): 
currentDate . setUTCMtLLtseconds(678): 
// タイ ム ゾ ー ン を 読み 出し 
var ttmezone = CurrentDate .qetTtmezoneOffset( )・ 
// 結果 を 出力 
ele.1nnerHTML = currentDate+"<br>": 
ele.innerHTML += "時 差 :"+timezone/69+" 時 間 ": 
+。fqlse): 


ブラ ウザ で index.html を 表示 する と 、 設定 し た 協定 世界 時 の 時 刻 と 時 差 が 表示 され ます 。 
な お 、| Date」 オ プ ジ ェ クト を 文字 列 に 変換 し て 表示 し た 場合 、 プ ブラ ウザ に よっ て 結果 が 異な り 
ます 。 


Sat Jul 28 21-03-45 UTC+0900 2012 
時 差 : -96 判 間 





mw 王 ヒ ビ ビ TI ロ NII- 口 9 協定 世界 時 の 時 刻 を 設定 する / 時 差 を 求め る 


還 請 請 間 際 国 協定 世界 時 の 時 刻 を 設定 する に は 
「setUTCHours()」 「setUTCMinutes()」 メ ソ ッ ド な ど を 使う 


TavaScript で は 、 生成 し た 「Date」 オブ ジェ クト に 用 意 き され た メソ ッ ド を 使う こと で 協定 
世界 時 の 時 刻 を 生成 する こと が で きま す 。 協定 世界 時 の 時 刻 を 設定 で きる メソ ッ ド に は 、 
次 の 表 の よう に な り ま す 。 


SetUTCHours 


0 
setUTCMinutes() 
setUTCSeconds() 





パラ メー タ は 、 範囲 を 超え た 場合 で も エラ ー に は な り ま せん 。 た と えば 、| setUTC 
Minutes (90) 」 と する と 、「Date」 オ プ ジ ェ クト で 示さ れる 時 刻 に 90 分 が 加算 され ます 。 こ 





れ は 他 の メソ ッ ド で も 同様 で す 。 正 数 だ け で な く 負 数 も 指定 で きま す 。「setUTCSeconds 中 画 
(-100)」 だ と 100 秒 前 に 設定 され ます 。 >U) 
日 本 と 世界 標準 時 に は 時 差 が あり ます 。 こ の 時 差 を 求め る に は 、「getTimezoneOfset n 
( ) | メソ ッ ド を 使い ます 。 これ は 時 差 を 分 で 返し ます 。 日 本 の 場合 は | -540」 となり ます 。 日 [E 

「60」 で 除算 すれ ば 時 差 -9 時 間 を 求め る こと が で きま す 。 M 
刻 
抽 放 に 三 還 必 2 
『] [ Date」 オブ ジェ クト を 生成 する SUS D. の の の 
e 日 付 を 設定 する …… ド ドド ドド rr p.234 
e 時 刻 を 設定 する … ド oo D. 236 
『] 協定 世界 時 の 日 付 を 設定 する な な まま Se D.C38 
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LIE6 1Chrome 1 Safari 5 | Firefox 4 ! Opera 11 1 iOS 4 1 Android2 1 WP 


=1 コ llmINlmlm 
さま ざま な 日 付 や 時 刻 の 形式 に 変換 する 


ここ で は 、 さま さま な 日 付 や 時 刻 の 形式 に 変換 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meto charset="utf-8"> 
<t1t せ le>SqmpLe</t1tle> 


<SCPtDt src="]s/sqmpte.]S"></scrtDpt> 





</heqd> 

画 ロ <body> 

> <OutDu キ ></OutDu キ > 
</body> 

1 </html> 

日 
付 JavaScript の コー ド (sample.js) 
還 wtndow.qddEventLtstener("1oqd", functton(){ 


var ele = document.getELementsByTagName( "output")[9] : 

// 現在 の 日 時 を 示す Date オ プ ジ ェ クト を 生成 

var currentDate = new Date(): 

// 日 付 を 文字 列 に 変換 

var dateStr = currentDate .toDateStrtng(): 

// 日 付 を 地域 文字 列 に 変換 

Var dateLStr = currentDate .toLocqteDateStrtng(): 

// 時 刻 を 文字 列 に 変換 

Var ttmeStr = currentDate .toTtmeStrtng(): 

// 時 刻 を 地域 文字 列 に 変換 

var ttmeLStr = currentDate .toLocaleTimeStrtng( ): 

// 結果 を 出力 

ete.tnnerHTML = dateStr+"<br>"+dgteLStr+"<br>"+ttmeStr+"<br> "+ttmeLStr: 
}。 fglse): 


ブラ ウザ で index.html を 表示 する と 、 日 付 と 時 刻 が 表示 され ます 。 また 、 地域 に 合わ せ た 日 
付 と 時 刻 も 表示 され ます 。 


Sat Feb 11 2012 
2012 年 2 月 11 日 
03-11.17 UTC+0900 


3-11-17 
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思 ビ ロ 丁 | 口 N - 1 ロロ m さま ざま な 日付 や 時 刻 の 形式 に 変換 する 


本 生生 地域 に 合わ せ た 日 付 と 時 刻 を 取得 する に は 「toLocateDateString」 
メソ ッ ド や 「toLocaleTimeString()」 メ ソ ッ ド を 使う 


TavaScript で は 、 共通 の 日 付 と 時 刻 だ け で な く 、 地域 (ロケ ー ル ) に 合わ せ た 日 付 
や 時 刻 も 取得 する こと が で きま す 。 | Date」 オ ブ ジ ェクト を 日 付 文字 に 変換 する に は 、 
「toDateString() 」 メソッド を 使い ます 。 これ に よっ て 日 付 だ けが 文字 列 化 され ます 。 時 


間 の 場合 は 、「 toTimeString() 」 メ ソノ ッ ド を 使い ます 。 

地域 に 合わ せ た 日 付 を 取得 し た い 場 合 に は 、「toLocateDateString() 」 メ ソ ッ ド や 
[toLocaleTimeString() 」 メソッド を 使い ます 。 た と えば 、| toLocaleTimeString)」 メ 
ソ ッ ド で は 、 日 本 の 場合 は 「2013 年 2 月 15 日 ] と いっ た 文字 列 が 返さ れ ま す 。 





関連 項目 
e [Date」 オ ブ ジ ェクト を 生成 する …… じ io 
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LIE6 』Chrome 1 Safari 5 | Firefox 4 1 Opera11 | iOS4 ! Android2 1 WP 」 


ら モ 1 口 N-1 品 1 


グリ ニッ ジ 標 準 時 を 求め る 





ここ で は 、 グリ ニッ ジ 標 準 時 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


ト 
口 
N 
1 <!DOCTYPE html> 
E <html> 
<hegd> 
<meta charset="utf-8"> 
- <tttle>Sqmpte</t1 人 tle> 
</head> 
<body> 
<OUtDu モ ></OUtDut> 


</body> 
</html> 


JavaScript の コー ド (sampleJs) 


wtndow .qddEventListener("1ogd" 。 functton(){ 





| ョ ロ | | Z ロ | に 
深 需 ・ 全 HH EEFTEE4 ェ は 


setTtmeout(functton(){ 
ベ var ele = document.getEtLementsByTagName("output")[9] : 
| // 現在 の 日 時 を 示す Date オ プ ジ ェ クト を 生成 
ーー var currentDate = new Date(): 
『 // グリ ニッ ジ 標 準 時 を 読み 出し 


ce Var gWt = currentDate .toGMTStrtng(): 
// 協定 世界 時 を 読み 出し 

ーー var utc = currentDate .toUTCStrtng(): 
当 // 結果 を 出力 

ete.tnnerHTML = gmt+"<br>"+utC: 

当 setTtmeout(arguments .caltee, 1999)・: 
+, 1999): 
前 +, fatlse): 
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mm 戸 己 ロ TI ロ N-1 口 ] mw グリ ニッ ジ 標 準 時 を 求め る 


ブラ ウザ で index.html を 表示 する と 、 グリ ニッ ジ 標 準 時 と 協定 世界 時 の 日 時 が リア ル タ イ ム 
に 表示 され ます 。 


。 FiTefOX マ 





Fr 10 Feb 2012 17-24-31 UTC 
M fr 10 Feb 2012 17-24-31 UTC 





Fr 10 Feb 2012 172431 GMT 
Fri 10 Feb 2012 172431 GMT 


を と ぅ っ @Q 


Fr 10 Feb 2012 172431 GMT 
Fr 10 Feb 2012 172431 GMT 





送 頃 ・ 計 HH EE に EEE に 4 ミロ 








グリ ニッ ジ 標 準 時 を 求め る に は 「toGMTString()」 メソッド を 使う 








JavaScript で グリ ニッ ジ 標 準 時 (GMT:Greenwich Mean Time) を 求め る に は 、 
[Date」 オブジェ クト の | toGMTString() 」 メソ ッ ド を 利用 し ます 。 グリ ニッ ジ 標 準 時 は 、 
現在 で は 協定 世界 時 に 置き 換え られ て いま す 。 TavaScript で は グリ ニッ ジ 標 準 時 も 協 
定 世 界 時 も 同じ 結果 を 返し ます 。 な お 、 協定 世界 時 を 求め る に は 、| Date」 オプ ジェ ク 
ト で | UTC」 の 文字 が つい た メソ ッ ド を 利用 し ます 。 文字 列 と し て 取得 し た い 場 合 に は 、 
「Date」 オ プ ブ ジェ クト の | toUTCString() 」 メ ソ ッ ド を 使い ます 。 


mm 両生 MT な の に UTC と 表示 され る 











IE で は 、「toGMTString() 」 を 呼び 出し て も 、 返さ れる 文字 列 に は 「GMT」 が 含ま れ 
ず 、「 UTC」 に な り ま す ( 上 記 の 結果 画像 の 左上 を 参照 )。 





関連 項目 pp ぁ 


の 】 Date | オブ ジェ クト を 生成 する 9 人 14 8 泊 雪 も D. ど どの 
ャ 協定 世界 時 の 日 付 を 求め る が の は 補 る 和 和 を ゲ 生 二 和 較 e ま な 六 玉 008. 拓 定 匠 深 を 析 新生 2 D. の の 8 
3 協定 世界 時 の 時 刻 を 求め る りお で で ザ を すす PPY 2 を ビザ ダッ ダイ イッ の ライ し た し を ES PWR D. の 30 


LIE9 』Chrome Safari 5 ! Firefox 4 1 Opera11 ! iOS4 | Android2 1 WP 


BE 上 DUDTIHN-1 ロ ロジ 


日 付 情報 を JSON 形式 に 変換 する 


ここ で は 、 日付 情報 を JSON 形式 に 変換 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metg charset="utf-8"> 
<tttle>SampLe</t1t1e> 
<SCrtpt src="]S/sample.]S"></SCr1Dt> 
</hegd> 
<body> 
< ぐ OUtDU キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("tLogd" 。 functton(){ 
var ele = document.getElLementsByTagName( "output")[9] : 
// 現在 の 日 時 を 示す Date オ プ ジ ェ クト を 生成 
var currentDate = new Date(): 
// JSON 形式 に 変更 
var ]SonStr = currentDate .toJSONC): 
// 結果 を 出力 
ele.tnnerHTML = ]SsonStr: 
}。 fqlse): 








深 因 ・ さ EE ま EK4 ミ Sm 


プラ ウザ で indexhtml を 表示 する と 、 JSON 形式 に 変換 し た 日 付 が 文字 列 で 表示 され ます 。 


2012-02-08T14-05-29.827Z 
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mm 王 ビ ピロ TI ロ NI-1 口 2 mW 日 付 情報 を JSON 形式 に 変換 する 


= ヨコ ョ = ョ lm 自 日 付 を JSON 形式 に 変換 する に は 「toJSUN()」 メ ソ ッ ド を 使う 
日 付 情報 を ISON 形 式 に 変換 する に は 、| toJSON() 」 メ ノッ ド を 使い ます 。 | toJSON(」 
メソ ッ ド を 使う と 、 次 の 形式 に 変換 きれ ます 。 
yyyy-rm-ddTHH :MM: SS .NNNZ 


それ ぞ れ 、 次 の 日 付 情報 を 表し ます 。 


西 暦年 4 桁 

mm | 月 {トト 
H 

1 > 
共 : 油 有 3 細 昌和 
LNNN_ 
に 挟 、 


| mm 
| 半 。 間 人 、 ・ . 。 」 
本: : 拍 識 


H 。 
S 
T 以後 の 文字 が 時 刻 を 示す 
時 刻 デー タ の 末尾 を 示す 
た と えば 、[「2012 年 2 月 8 日 14 時 7 分 3 分 314 秒 」 で あれ ば 、「2012-02-08T14:07.03.314Z」 
と な り ま す 。 


mm 融 N 還 較 SON に つい て 


JSON は TavaScript Object Notation の 略 で 、 読み や すく コン パク ト な 形式 で す 。 
XML 形式 より も 手軽 に 扱え る た め 、 XML に 変わ っ て さま ざま な 場面 で 利用 され て いま 
す 。 TSON 形 式 に つい て は 、 次 の ペー ジ に 仕様 が 掲載 きれ て いま す 。 
http://WWW.jSon.Org/jSon-ja.html 


こち 
時 (24 時 間 制 ) 






関連 項目 ゅ 


e [Date」 オ ブ ジ ェクト を 生成 する ……… ポ omoeoemeoemererererernrnrrrrti D. の 2 の 








対 ・ さ ロロ EE に 2 ミロ 
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AA 


ee 


ーー 


じじ HAPTER 一 時 


プン 9 け ザ サオ フン シェ ルト 


ae 
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LIE6 1Chrome Safari 5 | Firefox 4 1 Opera11 1 iOS4 】 Android2 1 WP 


に mlmIN 可 lm に 
ブラ ウザ 名 や バー ジョ ン を 取得 する 


ブラ ウザ に よっ て 動作 に 違い が ある た め 、 どの 環境 で 動作 し て いる か を 調べ る 必要 が 出 て 
くる 場合 が あり ます 。 ここ で は 、 プラ ウザ の 名 前 や バー ジョ ン を 取得 する 方 法 に つい て 解説 し 
な 記 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq Charset="utf-8"> 
<t1t て le>SqmplLe</t1t1e> 
<SCP1Dt Src="]S/sample.]S"></scrtpt> 
</hegd> 
<body> 
<h1h> ブ プラ ウザ 情 報 </h1> 
<p> ブ プラ ウザ 名 : <output></output></p> 
<p> バ ー ジ ョ ン :<output></output></p> 
<p> ユ ー ザ ー エ ー ジ ェ ン ト :<output></output></p> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oad", functton(){ 
Var ele = document.getEltementsByTagName( "output"): 
// プラ ウザ 名 を 表示 
ele[9] .tnnerHTML = navitgator .aqppName : 
// プラ ウザ の バー ジョ ン を 表示 
etle[1] .tnnerHTML = navigator.aqppVerston: 
// ユー ザー エー ジェ ント を 表示 
etle[2] .1nnerHTML = navigator.userAgent: 
} ょ , false): 


index.html を IE9 で 表示 する と 、 次 の よう に 、 ブラ ウザ に 関す る 情報 が 表示 され ます 。 


ブラ ウザ 情報 


ブラ ウザ 名 : Microsoft Internet Explorer 


パ バージョン: 5.0 (compatble- MSIE 9.0: Windows NT 6.1 
Trden む 5.0- SLCC2- NET CLR 2.0.50727- .NET CLR 3.5.30729- 
NET CLR 3.0.30729- Mcdia Ccnter PC 6.0- NET4.0C) 


ュー ザー エー ジェ ント : Mozilla/S.0 (compathble: MSIE 9.0- Windows 
NT 6.1: TridentS.0- SLCC2- NET CLR 2.0.50727- NET CLR 
3.5.30729- NET CLR 3.0.30729- Media Center PC 6.0- NET4.0C) 





mm 王 ロ T| 口 N-1 口 コ mw ブラ ウザ 名 や バー ジョ ン を 取得 する 


Google Chrome で は 、 次 の よう に 、 プラ ウザ に 関す る 情報 が 表示 され ます 。 





| 4 @ ① fle:///C:/Users/ 古 儲 %20 一 浩 /Desktop/0001/sa 交 | 


ブラ ウザ 情報 


ブラ ウザ 名 : Netscape 


バー ジョ ン :5.0 (Windows NT 6.1) ApplsWebKit/535.2 (KHTML, like Gecko) 
Chrome/150874.106 Safari/535 2 


ユー ザー エー ジェ ント : Mczils/5.0 (Windows NT 6.1) AppleWebKit/535 2 
(KHTML, like Gecko) Chrome/15.0874.106 Safari/535 2 





mm に lm 画 ブラ ウザ に 関す る 情報 を 取得 する に は 「navigator」 オ ブ ジ ェクト を 使う 


「navigator」 オブ ジェ クト に は 、 ブ ラウ ザ に 関す る 情報 が 格納 され て いま す 。 ア プリ ケー 
ショ ン 名 (ブラ ウザ 名 ) や バー ジョ ン な ど を 取得 で きま す 。 た だ し 、 過去 に お ける プラ ウザ 
の 遺産 と も いえ ます が 、 実際 に は 正しい 情報 は 得 ら れ ま せん 。 ブラ ウザ を 判別 する 方 法 
に つい て は 、 下記 の COLUMN を 参照 し て くだ さい 。 

「navigator」 オ プ ジ ェ クト の プロ パテ ィ は 、 次 の 表 の よう に な り ま す 。 


ブラ ウザ の バー ジョ ン 名 を 返す 
ユー ザ エ ー ジ ェ ント を 返す 














品 m 半 時 N 細 較 ブラ ウザ を 判別 する に は 


ブラ ウザ を 判別 する の で あれ ば 、|「userAgent」 プロパ ティ に 格納 され た 文字 列 か ら 
判別 する 必要 が あり ます 。 た だ し 、 この 「userAgent」 プロ パテ ィ も ブラ ウザ に よっ て 切り 
替え た り 、 変更 し た りす る こと が で きる た め 、 確実 に 特定 の プラ ウザ で ある と 判断 で きる 
材料 に は な り ま せん 。 


どう し て も ブラ ウザ を 特定 し な けれ ば な ら な い 場 合 は 、 そ の プラ ウザ だ け に 実装 され て い 
る オプ ジェ クト や プロ パテ ィ が ある か どう か を 調べ た 方 が 確実 性 が 高く な り ま す 。 た と えば 、 
IE で あれ ば 、「documentuniqueID」 の よう に し て 「uniqueID」 プ ロ パ ティ が ある か どう か 
で 判別 が で きま す 。 Opera の 場合 は 、「 window.opera」 と し て 調べ る こと が で きま す 。 
e ユー ザー エー ジェ ント 一 覧 

httD://WWW.ODeGnSDC ど .OTg/USerAgent/ 








テ ナ NHV^NJIN よ はり JIN に に EE に Ag 
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LIE6 』Chrome 1 Safari 5 | Firefox 4 1 Opera 11 | iOS4 1 Android2 IWP」 


B ら EDUDTIUHN-1 ロ オ 4 


Java や Geolocation な どの 機能 が 
使え る か どう か 調べ る 
ここ で は 、 Java や Geolocation な どの 機能 が 使え る か どう か 調べ る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<etq Charset="utf-8"> 
<tttle>Sqmplte</t1t1e> 
<S て PtDt SsPc="]S/sqmple.]S "></scrtpt> 
</head> 
<body> 
<OU て Du キ ></OuDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventLtstener("1ogd" 。 functton(){ 
var ele = document.getEtementsByTagName( "output")[9] : 
// Javg が 使え る か どう か 調べ る 
var flogg1 = navigator.]qvaEnabted( ): 
// Geotocation API が 使え る か どう か 調べ る 
var flag2 = navigaqtor.geolocation ? true: false: 
// 結果 を 出力 
ele.1tnnerHTML = "Java:"+flog1+"<br>"・ 
ele.tnnerHTML += "Getocgtton APT:"+fLqg2+"<br>": 
}, fatlse): 


ブラ ウザ で index.html を 表示 する と 、]ava と Geolocation が 使用 で きる か どう か の 結果 が 表示 
され ます 。 








= ヨミ ョ ュ ル | 利用 で きる 機能 の チェ ッ ク を 行う に は オブ ジェ クト の 存在 を 確認 する 


JavaScript で は 利用 可能 な 機能 が ある か どう か 調べ る 際 、 オブ ジェ クト が 存在 する か 
どう か で 判断 する 場合 が あり ます 。 た と えば 、 Geolocation API の 場合 、「navigator」 オ 
プ ジ ェ クト 内 に | geolocation]」 オ プ ジ ェ クト が ある か どう か で 判断 で きま す 。 な お 、 ]ava が 
使用 で きる か どう か に 関し て は 、「javaEnabled () 」 メ ノッ ド を 使っ て 調べ る こと が で きま す 。 


Android 2.2 





は も も ド EHTN ア LE は 


接続 回 線 の 種類 を 調べ る 


ここ で は 、 WidRhi や 3G 回 線 な ど 、 端末 が 接続 され て いる 回 線 の 種類 を 調べ る 方 法 に つい 
て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<tttle>Sample</t1tle> 
<SCrtpt src="]S/saqmple .]S "></SCr1Dt> 
</head> 
<body> 
<h3> 回 線 の 種類 </h3> 
<OUtDut キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window .qddEventLitstener("1oqd"。 functton(){ 





var ele = document .getEtementsByTagName( "output")[9] : 
// 回 線 の 種類 を 調べ る 
var lineType = navtgator . Connectton .tyDe: 
// 結果 を 出力 
ele.tnnerHTML = LtneType: 
}。 fatse): 


テ NHWN^NJ よ JIN に EE に に 48 は 


ブラ ウザ で index.html を 表示 する と 、 回 線 の 種類 を 示す 値 が 表示 され ます 。 


回 線 の 種類 


2 
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呈 ビ ヒロ T| 口 NN-1 口 5 m 接続 回 線 の 種類 を 調べ る 


細 接続 回 線 の 種類 を 調べ る に は 
0 「navigator.connection.tyDpe」 プロ パテ ィ を 使う 


Android 2.2 以 降 で は 、|navigator.connection.type」 プ ロ パ ティ で 回 線 の 種類 を 調 
べ る こと が で きま す 。 WiFi か 3G 通 信 か を 調べ る こと が で きる の で 、 回 線 の 種類 に よっ て 
表示 する 映像 な ど を 切り 換え る こと も で きま す 。 な お 、 Network Information API の 仕 
様 と は 若 十 、 違い が あり 、| navigator.connection.type」 プ ロ パ ティ は 文字 列 で な く 、 次 
の 表 に 示す 値 を 返し ます 。 

- 値 | 類 
二 全員 本 
皿 呈 本 志 た の 





2G 通 信 
Network Information API に つい て は 、 次 の URL を 参照 し て くだ さい 。 
e NetWOrk Information API 
http://Www.w3.org/TR/netinfo-api/ 


〔」 





ナ NHWNISL は Nu ty 
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LIE6 』Chrome 』 Safari 5 」 Firefox 4 1 Opera 11 | iOS4 」 Android2 !WP 


に に 1 し JNI 


ヒス トリ ー 数 を 求め る 





ここ で は 、 ヒス トリ ー 数 を 求め る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<heqgd> 
<meta charset="utf-8"> 
<tttte>Sampte</t1t1te> 
<SCrtDpt src="]S/sample.]S"></SCPtDt> 
</hegd> 
<body> 
<OU て Du キ ></Out て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1Load" 。 functton( )†{ 
var ele = document.getElementsByTagName( "output")[9] : 
// ヒス トリ ー の 数 を 調べ る 
var len = history. Length: 
// 結果 を 出力 
ele.tnnerHTML = "ヒス トリ ー 数 :"+1en: 
+, false): 


ブラ ウザ で index.html を 表示 する と 、 ヒス トリ ー 数 が 表示 され ます 。 


つう 男 





ヒス トリ ー 数 は 、| history」 オブジェ クト の 「length」 プロ パテ ィ を 参照 する こと で 求め る こ 
と が で きま す 。 ヒス トリ ー は 、 ペー ジ の 閲覧 を 進め た り 、 戻し た りす る こと で 変化 し ます 。 ヒ 
スト リー 数 は 、| back (0 」 メ ソ ッ ド や | forward() 」 メ ソ ッ ド 、| go() 」 メ ソ ッ ド で も 変化 し ます 。 
また 、| pushState () 」 メ ソ ッ ド と | replaceState ( 」 メ ソ ッ ド を 使え る ブラ ウザ で は 、 プロ 
グラ ム に よっ て ヒス トリ ー を 制御 する こと も で きま す 。 






関連 項目 ょ ゅ 


@ ペー ジ を 進め る / 戻 す YK て YY アポ た イチ ドッチ そう て れこ 1 を て マル た を 3 双 た マメ さ で 8 まで すす メイツ スッ ド す か て ッ ヤ ヤツ YY や 1 D. ど 56 
『 】 ヒス トリ ー を 追加 6 置換 する ます 0 矯 人 む 0 4 が 区 和 が 没 宮 7 人 だ 光 が 290 人 衝 人 か 人: p.58 





テテ NHNAJSH 和 JIN に に まこ に 48 
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LIE6 』Chrome 」 Safari 5 | Firefox 4 1 Opera11 | iOS4 1 Android2 1WP」 


=1 コ miglmlNlm/ 
ペー ジ を 進め る / 戻 す 


ここ で は 、 ペー ジ を 進め る / 戻 す 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


| <!DOCTYPE html> 
| <html> 
| <head> 
<metog charset="utf-8"> 
<tttte>SampLe</tttte> 
<SCr1Dt src="]s/sample.]S "></scrtpt> 
</head> 
<body> 
<p>Page 1 プ ヒ スト リー 数 :<output>9</output></p> 
<form> 
<tnput type="button" 1d="nextHis" vaqlue="1 つ 先 の ペー ジ に 進む "><br> 
<tnput type="button" 1d="prevHtst" vaqtue="1 つ 前 の ペー ジ に 戻る "><br> 
<1nput type="text" value="2" 1d="count"> 
<tnput type="button" 1d="goHtst" vglue=" 指 定 し た 数 だ け 進 む "><br> 
</form> 








<ul> 
<li><q href="tndex .html ">1 ペ ー ジ へ </q> 
<lt><q href="tndex2.htmtl">2 ペ ー ジ へ </g> 
<li><q href="tndex3 .html ">3 ペ ー ジ へ </g> 
<li><g href="tndex4 .html ">4 ペ ー ジ へ </a> 
<li><g href="index5.htmtl">5 ペ ー ジ へ </g> 

</ult> 

| </body> 

</html> 


上 ーー バル ーーーeeーー ト ーー 


| window .qddEventLtstener("1oqd" 。 functton(){ 
- var ele = document.getEtementsByTagName( "output")[ の ] : 
var btn1 = document .getEtementBy1Td( "nextHts"): 
var btnZ = document .getElementBy1Id( "prevHtst"): 
var btn3 = document .getElementById( "goHtst"): 
// 次 の ヒス トリ ー に 進む 
btn1 .qddEventLtstener("cltck"。 functton(){ 
htstory .forward(): 

す , false): 

// 前 の ヒス トリ ー に 戻る 

btn2 .qddEventLtstener("click",functton(){ 
htstory .back(): 

+,。fqlse): 





中 1 | 5 
ブ NHNAJN は MIN に に IE に 4Sm 
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還 司 己 ロ 丁 | 口 N-1 ロ ワ mw ペー ジ を 進め る / 戻 す 


// 指定 し た 数 だ け ヒ スト リー を 進め る 生 
btn3 .addEventLtstener("clLtck"。 functton(){ 
var n = document .getEtLementByTd( "count" ) .vatue: 
htstory.go(n): 
+。 faqlse): 
// 結果 を 出力 
ele.tnnerHTML = "現在 の ヒス トリ ー 数 :"+history.1ength: 
+, fglse): 


ブラ ウザ で index.html を 表示 し 、「 1 ペー ジ 」 一 「5 ペ ー ジ 」 の リン ク を 数 回 、 クリ ッ ク し た 後 で 、 
ボタ ン を クリ ッ ク す る と 、 クリ ッ ク し た ボタ ン に 応じ て ペー ジ が 移動 し ます 。 


ヒス トリ ー 間 で ペー ジ を 移動 する に は 
「back)」 「forward)」「go)」 メソッド を 使う 

ヒス トリ ー に 記録 きれ た 範囲 で あれ ば 、「back() 」 メ ノッ ド や 「forward (0 」 メ ソ ッ ド 、| go() 」 
メソ ッ ド を 使っ て 自由 に ペー ジ を 移動 する こと が で きま す 。「back() 」 メ ノッ ド は 、 1 つ 前 の ヒス 
トリ ー に 記録 され ん た ペー ジ に 戻り ます 。 その 際 、 ヒス トリ ー が な い 場 合 で も エラ ー に は な り ま せ 
ん 。「forward() 」 メ ソ ッ ド は 、 1 つ 先 の ヒス トリ ー に 記録 され た ペー ジ に 移動 し ます 。 進む べ 
き ペ ー ジ が 記録 きれ て いな い 場 合 で も エラ ー に は な り ま せん 。「back()」 メ ノッ ド 、「forward 
() 」 メ ノッ ド と も 、 パラ メー タ は あり ませ ん 。 

ヒス トリ ー を 任意 数 だ け 移 動 す る 場合 は 、| go()」 メ ソノ ッ ド を 使い ます 。| go() 」 メ ソ ッ ド 
の パラ メー タ に は 、 移 動 す る ヒス トリ ー 数 を 指定 し ます 。 止 数 で あれ ば 沈 の ページ に 進み 、 
負数 で あれ ば 前 の ペー ジ に 戻り ます 。「back() 」 メ ソ ッ ド と 「forward() 」 メ ソ ッ ド と 同様 
に 、 戻る べき ペー ジ や 進む べき ペー ジ が な い 場 合 で も エラ ー に は な り ま せん 。 


II= ニ IPI に IE 


関連 項目 
『] ヒス トリ ー 数 を 求め る YY です を ん アミ て て て で すまい すり 1 サリ シッ ヤマ D. の 55 
e ヒビ スト リー を 追加 ・ 置 換 す る 上 tie D. の 58 
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LIE 10 』 Chrome Safari 5 | Firefox 4 1 Opera 11 | iOS4 I Android2 


=1 コ mglmlNlml= 
ヒス トリ ー を 追加 ・ 置 換 す る 


ここ で は 、 ヒス トリ ー を 追加 ・ 置 換 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<metq charset="utf-8"> 
<tttte>SqmplLe</titte> 
<SCrtDpt src="]S/sample.]S"></scrtpt> 
</head> 
<body> 
<h1> ヒ スト リー 制御 </h1> 
<form> 
<tnput type="button" 1d="prevHts" vatue="1 つ 前 の ペー ジ に 戻る "><br> 
<tnput type="button" 1d="addHits" value=" ヒ スト リー 追加 "><br> 
<tnput type="button" 1d="repHits" value=" ヒ スト リー 置換 "><br> 
</form> 
<OutDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("1oagd" 。 functton(){ 

var ele = document.getElementsByTagName( "output")[9] : 

// wtndow に ヒス トリ ー 変 更 時 の イベ ント を 設定 

wtndow.aqddEventLtstener("popstate"。 functton(evt){ 
// pushState で 指定 され た ステ ー ト を 表示 
ele.tnnerHTML = event. state: 

}, faqlse): 

// ボタ ン 要 素 を 読み 出し 

var btn1 = document.getEtementById("prevHts"): 

var' btn2 = document.getElementByTd( "addHts"): 

var btn3 = document.getElementById( "repHts"): 

// ボタ ン に イベ ント を 割り 当て 

btn1 .qgddEventLtstener("clLtck"。 functton(){ 
// 前 の ヒス トリ ー に 戻る 
htstory .back(): 

}, fqtse): 

// ヒス トリ ー を 追加 

btn2 . gddEventLtstener("clLtck", functton(){ 
var t = (new Dote()).getTime(): 
htstory.pushStgte("newBook"+t, "新刊 " "new.htm1"): 








還 王 ビビ ピロ 丁 | 口 N! -1 口 日 m ヒス トリ ー を 追加 ・ 置 換 する 


ele.tnnerHTML = "ヒス トリ ー 数 : "+history.1ength: 全 る 
}, false): 
// ヒス トリ ー を 置換 
btn3 .qddEventLtstener("clLtck"。functton(){ 
var t = (new Date()) .getTtme(): 
htstory.replaceState("otdBook"+t, "古書 ", "old.htm1"): 
ele.innerHTML = "ヒス トリ ー を 置換 し まし た ": 
+, false): 
}, false): 


HINI エ | Gee 


この サン ブル は 、 ロー 人 その 場合 は 、 ネッ トワ ー 
ク 環 境 (Web サ ー バ ー 上 ) で 動作 を 確認 し て くだ さ 


NN NNN SNRANNRR ス WNWNNWNNNmNN ス NN ドド ポコ ドド ドド ドド ギド ギ ボド ド コネ NN ド N ネ ギド NNNNWNNNN3NNWPNNNWNNNN ギ や NNNN ド NNNNNNNWNNNNNT や NNNWNWNWNWNNWNmNemT キ = 


ブラ ウザ で index.html を 表示 し 、「 ヒ スト リー 追加 ]」 ボ タン を クリ ッ ク す る と 、 ヒス トリ ー が 追加 さ 
れ ま す 。 








テ NHNA へ JSL より JI に まき に 4 ミト ea 





「 1] つ 前 の ペー ジ に 戻る 」 ボ タン を クリ ッ ク す る と 、 プロ グラ ム で 設定 し た ヒス トリ ー の 情報 ( 文 
字 ) が 追加 され ます 。 





ヒス トリ ー 制御 


newBook1332858603285“ 





[ヒストリー 置換 」 ボ タン を クリ ッ ク す る と 、 現在 の ヒス トリ ー が 置換 され ます 。 
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展 Sample 


ヒス トリ ー 制 御 








, 作 男 


ブナ NHN^ANUSN り NM EE EE4 ェ は 





"oldBook1332858619862“ 


ヒス トリ ー を 追加 する に は 「pushState()」 メ ソ ッ ド 、 
MeI 画 換 する に は 「replaceState()」 メソッド を 使う 


スク リプ ト で ヒス トリ ー を 追加 する に は 、| pushState() 」 メ ノッ ド を 使い ます 。 パラ メー タ は 
3 つ あ り 、 最初 の パラ メー タ が イベ ント 発生 時 に 渡さ れる | state」 プ ロ パ ティ に 入る デー タ に 
な り ま す 。 2 番目 の デー タ が ヒス トリ ー の タイ トル (ペー ジ タ イ トル ) 、 3 番目 が URL に な り ま す 。 

現在 の ヒス トリ ー を 世 換 する に は 、| replaceState () 」 メ ソノ ッ ド を 使い ます 。 パ ラメ ー タ は 、 
|「 pushState () 」 メ ノッ ド と 同じ で す 。 

また 、 ヒス トリ ー が 変化 する と 、| window」 オ プ ジ ェ クト で 「 popstate」 イ ベン ト が 発生 し 
ます 。 

な お 、 これ ら の メソ ッ ド な ど は 、 ロー カル ディ スク 上 で は 動作 し な い ブ ラウ ザ も あり ます 。 
この た め 、 ネッ トワ ー ク 環境 (Web サーバ ー 上 ) で 使用 する よう に し て くだ さい 。 

Histrory API に つい て は 、 次 の URL を 参照 し て くだ さい 。 
w Histrory AFI 

http://Www.w3.org/TR/html5/history.html 


関連 項目 pp 





本 に に: 間 馬 凍 人 旨 ( が 30RAKU20042A4zz224twvbrcttekvRM8AS6E3303443 19344 2425P0422 D.255 
評 の く S の 3 全 7 が 040200AAKe16yyrikt4weckk201 計 AIMt4sGt4tKtgtCMZ3 2 1 p.256 
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LIE6 1 Chrome 1 Safari 5 | Firefox 4 1 Opera 11 」 iOS4 1 Android 2 WP 





=1 ゴ malmINBlml= 
画面 の サイ ズ を 求め る 


ここ で は 、 画面 の サイ ズ を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<heogd> 
<meta charset="utf-8"> 
<tttte>Sampte</t1te> 
<SCrtDt src="]S/sample.]S"></SCrtDt> 
</head> 
<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window .addEventLtstener( "togd" , functton(){ 





var ele = document .getElementsByTagName( "output")[9] : 
// 画面 の 横幅 を 取得 
Var W = SCreen . W1dth: 
// 画面 の 縦 幅 を 取得 
var h = screen.hetght: 
// 画面 の 有効 な 横幅 を 取得 
var aw = SCreen.qvatlW1dth: 
// 画面 の 有効 な 縦 幅 を 取得 
var ah = screen.qvat 1Hetght: 
// 結果 を 出力 
ele.tnnerHTML = "横幅 :"+w+"<br>": 
ele.innerHTML += " 縦 幅 :"+h+"<br>": 
ele.tnnerHTML += "有効 な 横幅 : "+qw+"<br>": 
ele.innerHTML += "有効 な 縦 幅 : "+ah: 
+, false): 


テ ナ NTHNAJH よ JI EE に 4 Se 


プラ ウザ で indexhtm を 表示 する と 、 画面 の サイ ズ と 実際 に 利用 で きる 画面 の サイ ズ が 表 
示さ れ ま す 。 
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還 戸 己 ピロ 丁 | 口 届 -1 口 紀 wm 画面 の サイ ズ を 求め る 


IE コ 3 ーー タ 画 面 の サイ ズ を 調べ る に は 「screen」 オ ブ ジ ェクト の 
「width] プロ パテ ィ や 「height」 プロ バ パティ を 使う 


モニ タ 画 面 の サイ ズ は 、| screen] オブ ジェ クト の 「width] プロ パテ ィ と 「height | プロ 


パテ ィ で 調べ る こと が で きま す 。 また 、 メニ ュー バー な ど を 除い た 実際 に 使用 で きる 画面 
サイ ズ は 、|「availWidth 」 プロパ ティ と |「 availHeight」 プロ パテ ィ で 調べ る こと が で きま す 。 


miml 紅 和 I 識 マル ナチ モニ タ の 場合 


モニ タ 画 面 が 複数 ある 場合 (マル チ モ ニ タ や デュ アル モニ タ な ど ) は 、 プラ ウザ に よっ 
て 動作 が 異な り ま す 。 

IE9、 Safari 5 一 6、 Opera 12(Mac OS X/Windows 7) で は 、 メニ ュー バー や タス ク 
バー が ある メイ ン 画 面 の サイ ズ が [| width」 プロ パテ ィ と 「height」 プロ パテ ィ に 入り ます 。 
複数 の 画面 の すべ て の 幅 を 加算 し た ピク セル 数 に は な り ま せん 。 また 、 第 二 画 面 な ど 、 
他 の 画面 に ブラ ウザ ウィ ンド ウ を 移動 させ た 状態 で | width] プロ パテ ィ と 「 height | プロ 
パパ ティ を 読み 出し て も 、 メニ ュー バー や タス ク バ ー が ある メイ ン 画 面 の 幅 し か 取得 する こと 
が で きま せん 。 

Google Chrome 21、 Firefox 14、 Safari 4 で は 、 ウィ ンド ウ が 表示 され て いる 面積 が 
大 きい モニ タ 画 面 の サイ ズ が 「width」 プロ パテ ィ と 「height 」 プロ パテ ィ に 入り ます 。 この 
場合 で も 、 すべ て の モニ タ 画 面 の 合計 ビク セル 数 に は な り ま せん 。 

| width]」 プ ロ パ ティ と | height」 プロ パテ ィ は ブラ ウザ の バー ジョ ン に よっ て 異な る 結果 
を 返す の で 、 マル チ モ ニ タ を 前 提 と する 場合 は 注意 が 必要 で す 。 


















過 計 事 認 三 上 


信 画面 の 色 深 度 を 求め る 和光 (46 家臣 入 休 06 も 信和 (灯る D.P6 3 
P 画面 の 解像度 を 調べ る 本寺 を 入党 涯 六 玉 が 6@6 和 当 人 時 び 本 党 各所 せな 2 天 wa D. りら 65 
P】 ウイ ンド ウ の 幅 を 求め る 0. 電導: 人 の な Amy D. の 67 
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画面 の 色 深 度 を 求め る 


ここ で は 、 画面 の 色 深 度 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<ttt1e>Sampte</t1tte> 
<SCPtpt Src="]S/sqmple.]S"></SCr1Dt> 
</head> 
<body> 
<OutDu キ ></OuU て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow . qddEventLtstener( "1Logd" 。 functton(){ 





var ele = document.getEtLementsByTqgName( "output")[9] : 
// 画面 の 色 深 度 を 調べ る 
var btt = Screen .ColorDepth: 
// ビッ ト 数 か ら 画 面 の 色 数 を 求め る 
var n = Math.pow(2,。 b1t): 
// 結果 を 出力 
ele.tnnerHTML = "画面 の ビッ ト 数 :"+btt+"<br>": 
ele.tnnerHTML += "画面 の 色 数 :"+n: 
+, faqlse): 


テ ナ NYHNAJSHL は けり に だま に 4 ミド | 


ブラ ウザ で index.html を 表示 する と 、 色 深 度 の ビッ ト 数 と 、 最大 表示 色 数 が 表示 され ます 。 


画面 の ビッ ト 数 :24 
「 画面 の 色 数 : 16777216 
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還 王 古 | 口 N -11 口 mW 画面 の 色 深 度 を 求め る 


画面 の 色 深 度 を 調べ る に は 
還 抽 語詞 語調 「Screen」 オ ブ ジ ェクト の 「colorDepth」 プロ バテ ィ を 使う 


画面 に 表示 され る 文字 や グラ フィ ッ ク の 色 は 「 赤 」(red) 、「 青 」 (Blue) 、「 緑 」 (Green) 
の 三原 色 の 組み 合わ せ で す 。 コン ピュ ー タ で は 、]1 色 に 付き 何 ビッ ト 割 り 当 て る か で 表現 で 
きる 色 数 が 変わ り ま す 。 多く の 環境 で は 、 フル カラ ー と 呼ば れる RGB 各 色 8 ビ ッ ト が 利用 さ 
れ ま す (OS に よっ て は 内 部 で は 16 ビ ッ ト の 場合 も ある ) 。 この ビッ ト 数 が どの くら いあ る か を 
調べ る に は 、|「 screen」 オブジェ クト の | colorDepth」 プ ロ パ ティ を 使い ます 。 結果 は ビッ ト 
数 に な る の で 、 色 数 を 求め た い 場 合 は サン プル の よう に 、「Math.pow() 」 メ ソ ッ ド を 利用 し 





ます 。 
ビッ ト 数 と 色 数 は 、 次 の 表 の よう に な り ま す 。 24 ビ ッ ト と 32 ビ ッ ト は 、 同じ 色 数 に な り ま す 。 
| す |] 自 穫 | 
| 4 | 16 色 
1 | 8 | 256 色 | 
- 
8 | 16 | 32768 色 
ブ 
g 
和 な お 、 Opera で は 、 フル カラ ー の 場合 、| colorDepth」 プ ロ パ ティ は [32」 を 返し ます 。 
ク 
ト e 画面 の サイ ズ を 求め る も … ひ つ 呈 上 … ぐ ti ……D.26 1 
0 ! 1 シス な 光 科す (CYP 7 Dp.265 
ウツ OO 本 生 作付 に の 950 ん utHPAr2CRC 0 家 馬 際 い 1oiou00 D.267 
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[IE6 Chrome 1 Safari 5 】 Firefox 4 | Opera11 1 iOS4 』 Android 2 WP_ 


=1 コ siglmlN 
画面 の 解像度 を 調べ る 


ここ で は 、 画面 の 解像度 を 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttte>Sqmpte</t1tte> 
<scrtpt src="]Ss/sample .]S"></SCr1tpt> 

</head> 

<body> 
<h3> デ バイ ス の 解像度 </h3> 
<OUtDut></ Out て Dut> 

</body> 

</html> 


JavaScript の コー ド (sample.jS) 


window .qddEventLtstener("1oad" 。 functton(){ 





var ele = document .getELementsByTagName("output")[9]: 
// IE で 画面 の 解像度 を 調べ る 
var xdp1 = Screen.devtceXDPI : 
var ydp1 = Screen .devtceYDP+ : 
// 結果 を 出力 
ele.innerHTML = "画面 の 解像度 (IE):"+xdpi+", "+ydpt+"<br>『: 
// Androtd な どの 場合 
var dpi = wtndow.devtcePtxelLRat1o: 
// 結果 を 出力 
ele.innerHTML += "画面 の 解像度 :"+dpt: 
+, false): 


テ ナ NHVAJSNH 二 JIN に EEEEM4s 


index.html を 表示 する と 、 IE で は 画面 の 解像度 が 表示 され ます 。 


| デバ イス の 解像度 


画面 の 解像度 (TE): 96. 96 
画面 の 解像度 : vndefined 
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テ ナ NHNAJUN 二 MI 記 に に 248 は 
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還 王 ビ ロイ T| 口 NN -11 1 mW 画面 の 解像度 を 調べ る 


Galaxy SII(Android 2.3) で は 、 1.5 倍 の 解像度 で ある こと が 表示 され ます 。 


デパ イス の 解像度 


画面 の 解像度 (IE) : undefined, undefined 
画面 の 解像度 : 1.5 





Galaxy Nexus(Android 4) で は 、 2 倍 の 解像度 で ある こと が 表示 きれ ます 。 


デバ イス の 解像度 


画面 の 解像度 (IE) : undefined, undefined 
画面 の 解像度 : 2 





iPhone 4SGOS 5) で は 、 2 倍 の 解像度 で ある こと が 表示 され ます 。 


デバ イス の 解像度 


画面 の 解像度 (IE) : undefined、 undefined 
画面 の 解像度 : 2 









画面 の 解像度 を 調べ る に は 「deviceXDPI」 プロ パテ ィ や 
「deviceYDPI」 プロ パテ ィ 、「devicePixelRatio」 プロ パテ ィ を 使う 


画面 の 解像度 は 、 96dpi(dpi=dot per inch) が 基準 に た っ て いま す 。 た だ し 、 デバ イ 
ス に よっ て は 、 より 高い 解像度 の 場合 も あり ます 。 この 解像度 を 調べ る に は 、 TE の 場合 は 
| screen」 オ プ ジ ェ クト の 「deviceXDPI」 プロ パテ ィ や 「deviceYDPI | プロパ ティ を 参 昭 
し ます 。 これ ら の プロ パテ ィ は 、 96dpi で あれ ば 96 の 数 値 を 返し ます 。 

IPhone や Android な どの スマ ー ト フォ ン で は 、| window」 オ ブ ジ ェクト の 「devicePixel 
Ratio] プロ パテ ィ を 参照 し ます 。「1」 で あれ ば 1 ピク セル が 1px、「 2」 で あれ ば 1 ピク セル 
が 画面 で は 2px 分 の 描画 と な り ま す (「devicePixelRatio」 プロパ ティ の 値 が 「2 | で あれ 
ば 、2 倍 の 細か さと いう こと に な る 。 iPhone 3GS で あれ ば [1」、 2 倍 の 画面 の 細か さ で あ 
る iPhone 4 で は 「2」 と な る ) 。 






NEPINIT 












関連 項目 
性 思 のび サイ 深 姜 本 生計 hy 層 MMXYbewS14413Y38288K4ScRYEtPEVWCrEUGeC CHCUI202 D.61 
入 回 8 本 訟 送 尿 衣 二 204233M0MOM4eSrcrtNas 沈 9 KEN DSE2C SA p.263 
ワイ ンド 200 細 本 の SDCS26H264 い 1824: 導 3220802 14fM0L2e2CHB RE p.267 


IE6 Chrome 】 Safari 5 | Firefox 4 1 Opera11 1 iOS4 | Android2 1WP_ 


まう 11LJN- | もめ 


ウィ ンド ウ の 幅 を 求め る 








ここ で は 、 ウィ ンド ウ の 幅 を 求め る 方 法 に つい て 解説 し ます 。 


= が 中 = 才 mm 中 境 HTML の コー ド (index.html) 
<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<ttt1e>Sqmp te</t1 寺 le> 
<scrtpt src="]S/saqmple.]S"></SCrtDt> 
</head> 
<body> 
<OU モ Du キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.j8) 


wtndow .addEventLtstener("togd" 。 functton()+ 
var ele = document .getEtLementsByTagName("output")[9]: 
// ウィ ンド ウ の 横幅 を 取得 
var W = Witndow . outerW1dth: 
// ウィ ンド ウ の 縦 幅 を 取得 
var h = window .outerHetght: 
// ウィ ンド ウ の 有効 な 横幅 を 取得 
var tw = wtndow.1nnerW1dth: 
// ウィ ンド ウ の 有効 な 縦 幅 を 取得 
var th = wtndow.1tnnerHetght: 
// 結果 を 出力 
ete.innerHTML = "ウィ ンド ウ 全 体 の 横幅 :"+w+"<br>": 
ele.innerHTML += "ウィ ンド ウ 全 体 の 縦 幅 : "+h+"<br>": 
ele.tnnerHTML += "ウィ ンド ウ の 内 側 の 横幅 : "+tw+"<br>": 
ele.innerHTML += "ウィ ンド ウ の 内 側 の 縦 幅 :"+ih: 

+。 faqlse): 


プラ ウザ で index.html を 表示 する と 、 ウィ ンド ウ の 外側 の 幅 と 内 側 の 幅 の サイ ズ が 表示 され 
ます 。 


ウィ ンド ウ 全 体 の 横幅 : 364 
ウィ ンド ウ 全 体 の 縦 幅 :268 
ウィ ンド ウ の 内 側 の 横幅 : 348 


ウィ ンド ウ の 内 側 の 縦 幅 :205 








テ ナ NYHNAJISNL て TAMINI EE に:2 ミ ば 


26/ 





ブナ NHNANJIAH 二 JIN に に まき WEK4 ミ 店 
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呈 戸 ビビ ピ ロイ 丁 | 口 和 N - 1 12 mm ウィ ンド ウ の 幅 を 求め る 


ウィ ンド ウ 幅 を 求め る に は 「outerWidth」 「outerHeight」 
「innerWidth」 「innerHeight」 プロ パテ ィ を 使う 


ワイ ンド ウ に は タイ トル バー や クロ ー ズ ボタ ン な ど が あり 、 これ ら を 含め た サイ ズ を 求め る 場 
合 は 、| window」 オ プ ジ ェ クト の 「outerWidth] プロパ ティ と [「outerHeight | プロ パテ ィ を 
参照 し ます 。 な お 、 ウィ ンド ウ の 影 は 、「outerWidth] プロ パテ ィ と 「outerHeight | プロパ 
ティ に は 含ま れ ま せん 。 

ウィ ンド ウ の 外側 で は な く 、 実際 に Web ペ ー ジ が 表示 され る 部 分 の サイ ズ は 、 
| innerWidth」 プ ロ パ ティ と 「innerHeight」 プロ パテ ィ を 参照 し ます 。 
いずれ の プロ パテ ィ も 得 ら れ た 値 の 単位 は 、 ピク セル に な り ま す 。 





IIERII に MI 









関連 項目 ゅ ゅ 


を 前 の サザ 尼 肖 納 誠 た の か が の いい SOM02CUee42ANNSDUKUU320 CTA42S3E2PAAS2L229008 p.261 
ぁみ 還 0 あの の 遇 導 放 大 人 Ne0602 の uaMcenttMGNSUUASSRNSIAUESUU p.263 
か 還 測 の 前 陸 肝 か 約 Ui の USM22NLCUCLUANNODA20P OR D.265 


LIE6 Chrome ! Safari 5 | Firefox 4 1 Opera11 」iOS4 』 Android2 !WP」 


EE 4 1C1N-1) 9 


指定 位置 まで スク ロー ル さ せる 








ここ で は 、 指定 位置 まで スク ロー ル さ せる 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<tttte>Sampte</ て 1 て 1e> 


<scrtpt src="]s/saqmple .]S "></SCr1Dpt> 





</head> 
<body> 
<h1> 指 定位 置 ま で スク ロー ル </h1> 
<form> 回 
<tnput type="button" value="499px 先 へ " 1d="to490"> に ヽ ] 
<input type="button" vatue="19px 下 へ "1d="by19"> に 
</form> m 
<tmg Src="1tmages/photo . pg" wtdth="299" hetght="759"> ブ 「 ロ 
</body> ラ m 
</html> サ 
う G 
JavaScript の コー ド (sample.jS) ジ 
witndow .qddEventLtstener("1ogd"。 functton(){ ィ 「 


var btn1 = document.getEtementById("to409"): 

var btn2 = document.getEtementByTd( "by19"): 

// ボタ ン に イベ ント を 割り 当て 

btn1 .gddEventListener("cttck", functton(){ 
// 指定 し た 位置 (499px 先 ) ま で スク ロー ル す る 
wtndow.scroltTo( の 9, 499): 

+, faqtlse): 

// ボタ ン に イベ ント を 割り 当て 

btn2 .gddEventLitstenerC"clitck"。 functton()+ 
// 指定 し た 量 (19px) だ け ス クロ ー ル する 
wtndow.scrottBy( の 9, 19): 

+,。 foqlse): 

+, foqlse): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 指定 し た 位置 に スク ロー ル す る か 
指定 し た 量 だ け ス クロ ー ル し ます 。 
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gm 己 ビ ビ ビ ピ TI 品 N-11 コ W 指定 位置 まで スク ロー ル さ せる 





| scrollBy() 」 メ ソ ッ ド の 場合 、 相対 的 に スク ロー ル し ます 。 





| scrollITo()」 メ ソ ッ ド の 場合 、 ペー ジ 左 上 を 原点 と し て 指定 し た X 座 標 と Y 座 棲 まで スク 


テ NYHWAJUNH よ けり に まき ES 













ペー ジ 内 容 を スク ロー ル さ せる に は 
語 軸 議 語 診 謀 「scrollTo()」 メ ソ ッ ド や 「scrollBy()」 メ ソ ッ ド を 使う 


ペー ジ 内 容 を スク ロー ル さ せる に は 、「scrollTo() 」 メ ノッ ド 、 ま た は 、「scrollBy() 」 メ ソ ッ 
ド を 使い ます 。「scrollTo() 」 メ ノッ ド は 、 指定 し た XX 座標 と Y 座 標 ま で ペー ジ を スク ロー 
ル さ せま す 。| scrollBy(O 」 メ ソ ッ ド は 、 指 定 し た 移動 量 だ け ペ ー ジ を スク ロー ル さ せま す 。 
| scrollTo() 」 メ ソ ッ ド と 「 scrollBy() 」 メ ソ ッ ド と も 、 瞬時 に スク ロー ル し ます (Windows 
Phone を 除く )。 スム ー ズ に スク ロー ル さ せる 場合 は 、 タ イマ ー を 使っ て 処理 する か 、 ス ムー 
スス クロ ー ル する ライ ブラ リ や プラ グイ ン を 使用 する 必要 が あり ます 。 
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還 王 ビ ピロ 丁 | 口 N-11 コ 3 m 指定 位置 まで スク ロー ル さ せる 


miml 半 和 N 上 較 スマ ー ト フォ ン で アド レス バー を 隠す 


iPhone や Android な どの スマ ー ト フォ ン で は 、 ペー ジ の 読み 込み が 完了 し た 後 、 数 ミ 
リ 秒 後に スク ロー ル さ せる こと で アド レス バー を 目 動 的 に 隠す こと が で きま す 。 な お 、 ペー 
ジ が スク ロー ル 可 能 で な い 場 合 は 、 アド レス バー を 隠す こと は で きま せん 。 


wtndow . addEventLtstener( "toqd" 。 functton()+ 
setTtmeout("scrollTo(9,1)" 。 199): 
+,。 fatse): 





関連 項目 p ヶ ! 
e ス クロ ー ル 時 に 処理 を 行う …(… ド ドー ドド ドー ババ 0 バ バー ババ ババ ーー ババ p.431 





テ NYHNAJSH は MI に まき に に 45 は 
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BE 上 ED ビ TI 品 N-11 作 


Base654 エ ンコ ー ド / デ コー ド す る 








ここ で は 、 Base64 エ ンコ ー ド / デ コー ド す る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>SqmpLe</t1tle> 
<SCrtDt src="]S/sqmple.]S "></scrtpt> 
</hegd> 
<body> 
<OuUtDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . addEventLtstener("1ogd" 。 functton(){ 





Var ele = document.getElementsByTagName( "output")[9] : 
// エン コー ド し た 結果 を 代入 

var result1 = window.btog("JgvaScrtpt 199%"): 

// デコ ー ド し た 結果 を 代入 

Var resultZ2 = wtndow.atobCresult1): 


// 結果 を 出力 


ele.1nnerHTML = "btoq:"+result1+"<br> "・ 


テ ナ NTHNAJSL 二 JIN EE だ まま に 4 ミ に 


ele.tnnerHTML += "atob:"+result2: 
}。fqtse): 


ブラ ウザ で index.html を 表示 する と 、 文字 列 を Base64 エ ンコ ー ド し た 結果 と 、 デコ ー ド し た 
結果 が 表示 され ます 。 


btoa : SmF2YVNjicmlwdCAxMD 旭 | 
atob: JavaScript 100% 
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生 呈 ビ ヒロ TI 口 届 -114 mwBase64 エ ンコ ー ド / デ コー ド す る 


Base654 エ ンコ ー ド する に は 「btoa()」 メ ソ ッ ド 、 
mi Base64 デ コー ド す る に は 「atob()」 メ ソ ッ ド を 使う 


人 Ya 64 種 類 の 文字 列 ) と し て 変換 (エン コー ド ) す る 場 
に は 、「btoa() 」 メ ソ ッ ド を 使い ます 。 パラ メー タ に 指定 され た デー タ は 、 Base64 形 式 で 
示 き れる 文字 人 に 変換 され ます 。 Base64 エ ンコ ー ド され た 文字 列 を 元 に 復元 (デコ ー ド ) 
する に は 、| atob() 」 メ ノッ ド を 使い ます 。 
Base64 で 使用 され る 文字 は 、 次 の 表 の よう に な り ま す 。 また 、 不足 ビッ ト 数 を 埋め る 文 
字 と し て | =」 が 使用 され ます 。 


| 値 0 対応 文字 対応 文字 





9 国 


テ NHW^ANJUN け いい に に 2 Sa 


な お 、 Base64 に つい て は 、 次 の URL を 参照 し て くだ さい 。 
e Base64 
http://tools.ietf.org/html/rfc3548 
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LIE6 』Chrome Safari 5 | Firefox 4 』 Opera11 1 iOS4 


=1 ゴ mglmlNaI に 
印刷 する 


ここ で は 、 ペー ジ 内 容 を 印刷 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<hegd> 
<Wetq charset="utf-8"> 
<tttle>SgmpLe</t1tte> 
<SCr1Dpt Src="]S/sample.]S"></scrtDt> 
</head> 
<body> 
<ht> 印 刷 テ スト </h1> 
<formW> 
<tnput type="button" vatue=" 印 刷 "> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oagd"。 functton(){ 





var ele = documernt.getELementsByTaqgName( "tnput")[9] : 
// ボタ ン に イベ ント を 割り 当て 
ele.qddEventLtstener("cltck"。functton(){ 
// 印刷 する 
wtndow.DP1nt(): 
+, fatse): 
}, false): 


テ ナ NHNAJS よ MIN EE まき WE に 4 ミ は 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 印刷 ダイ アロ グ が 表示 され 、 ペー 
ジ 内 容 が 印刷 され ます 。 


二 Fax 
二 Microsoft XPS Document Writer 
4 
状態 。 準備 完了 同 ア イル ^ 出 (F) に 請 抽 細 和 6 
場所 1 
コメ ント Printer created by TPAutoConnect 


ペー ジ 入 還 


先 すべ て (D 部 数 (C) 

選択 し た 部 分 (①) 弄 在 の ペー ジ (U) 

仙 ペ ー ツ 指定 (⑨ 1 8 妥 部 単位 で 印 慌 O) 

ペー ジ 番 号 の みか 、 ま た は パージ ツ 鮭 國 の み を 入力 し 2 2 
て 〈 だ さ ( ぃ 例 - 5-12 1 1 
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生 王 ビ ビビ じ ピ TINI-1155 m 印刷 する 


miNI 紀 ll 画 印刷 する に は 「print()」 メソッド を 使う 


ペー ジ 内 容 を 印刷 する に は 、「print() 」 メ ノッ ド を 使い ます 。 ウ ィ ン ド ウ だ け で な く 、 フ レー 
ム を 指定 し て 印刷 する こと も で きま す 。 また 、iOS で は 、 Air Print に 対応 し て いる 必要 が 
あり ます 。 Android 2-4 で は 、| print() 」 メ ノッ ド を 実行 し て も 何 も 起 こり ませ ん 。 

印刷 内 容 を 変更 する 場合 に は 、| beforeprint」 イ ベン ト と 「 afterprint」 イ ベン ト を 利用 
し ます 。 イベ ント ハン ドラ 内 で は 、 CSS な ど を 使っ て 、 印刷 し た く な いも の は 非 表 示 に し て 
お きま す 。 
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テ ブ NYHNAJUSH よ MIN に に だま E に 4 ミ ピ 


LIE9 』Chrome 1 Safari 5 | Firefox 4 」 LiOS5 


EL5 ILJN-1 1 
選択 され た 文字 を 取得 する 


ここ で は 、 選択 され た 文字 を 取得 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metg charset="utf-8"> 
<t1tle>SqmplLe</tttte> 
<SCPr1Dt Src="]S/sample.]S"></scrtpt> 
</head> 
<body> 
<d1V> 
<p> 祇 園 精 舎 の 鐘 の 声 諸 行 無常 の 響き あり </p> 
<p> 沙 弘 双 樹 の 花 の 色 盛 者 必 表 の 理 を あら わす </p> 
<p> お ご れる 人 も 久 し か ら ず た だ 春の 夢 の ご と し </p> 
<p> た け き 者 も 遂に は 減 び ぬ 偏 に 風 の 前 の 塵 に 同じ </p> 


<hr> 





<OUt て Du キ ></OutDut> 
</d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("1ogd" 、functton(){ 


\J 叶 二 け MI ココ ヨ ュ ロマ ロロ 


3 


NTHN 


var ele = document .getElementsByTagName("output")[9] : 
// タイ マー を 使っ て 選択 され た 文字 を 定期 的 に 表示 
setTnterval(functton(){ 
// 選択 範囲 を 保持 する オプ ジェ クト を 取得 
var selOb] = wtndow.getSelectton( ): 
// 最初 に 選択 され た 選択 範囲 か ら 文 字 を 取得 
var text = selOb] .getRangeAt( の ): 
// 選択 され た 文字 を 出力 
ele.tnnerHTML = text: 
}, 1999): 
}, false): 
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必 王 ビ ビビ ピ 丁 | 口 ト N!-116 wm 選択 され た 文字 を 取得 する 


ブラ ウザ で index.html を 表示 し 、 ペー ジ 内 の 文字 を 選択 する と 、 選択 し た 文字 が 画面 に ほ 
ぼ ぽ リ アル タイ ム に 表示 され ます 。 


也 計 本 告 の 和議 の 声 庄 行 記 


て 


沙 比 双 樹 の 花 の 色 盛 者 の 理 を あら わす 


お ご れる 信 も 久 し か ら ず た だ 春の 夢 の ご と し 
た け き 者 も 遂に は 減 び ぬ 偏 に 風 の 前 の 塵 に | 司 じ 


惑 周 精 舎 の 鐘 の 声 語 行 


選択 され た 文字 を 取得 する に は 
「getSelection()」 メ ソ ッ ド と 「getRangeAt()」 メ ソ ッ ド を 使う 


ウイ ンド ウ 上 で 選択 され た 文字 を 取得 する に は 、| getSelection () 」 メソッド を 使っ て 


ロロ NEPUINT 





選択 範囲 の 情報 を 持つ [Selection 」 オブ ジェ クト を 取得 し ます 。 選択 され た テキ スト は 相 画 
[getRangeAt() 」 メソ ッ ド を 使っ て 読み 出す こと が で きま す 。 Firefox の 場合 、 複数 AN 
の 選択 範囲 を 持つ こと が で きる た め 、| getRangeAt() 」 の パラ メー タ は | 0」 だ け で な m 
く 、「1」 以 上 の 場合 も あり ます 。 選択 範囲 が いく つ あ る か は 、| Selectionm」 オブ ジェ クト の ブ | 
[rangeCount」 プ ロ パ ティ で 求め る こと が で きま す 。 9 
オ 
フ 
ジ 
エ 
ツ 
ト 
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LIE6 』Chrome 1 Safari 5 | Firefox 4 1 Opera 11 | iOS5 | Android2 IWP」 


=1 ゴ =WMImIN RB 
アラ ー ト ダイ アロ グ / 確 認 ダ イア ログ / 
入力 ダイ アロ グ を 表示 する 


ここ で は 、 アラート ダイ アロ グ / 確 認 ダ イア ログ / 入 力 ダ イア ログ を 表示 する 方 法 に つい て 解説 
し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq Charset="utf-8"> 
< て 1 て le>Samp le</t1t1e> 
<SCrtDt src="]S/Sample.]S "></scr1Dpt> 
</head> 
<body> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 
// 1<3 の 数 値 を あて る (数 あて ゲー ム ) 
var num = Math.ftloor(Math.random() * 3) + 1: 
// 入力 ダイ アロ グ を 表示 
var text = prompt("1>3 の 値 を 入れ て くだ さい ", 2): 
// 入力 され て いな い 場 合 は nut1 に な る の で 以後 の 処理 を し な い 
1f (!text){ return: } 
// 確認 ダイ アロ グ を 表示 
var flag = confirm(" 本 当 に この 数 値 で いい で すか ? "): 
1f (flog === false){ return: + 
// 当たっ て いる か 調べ る ( 型 は 自動 変換 され る ) 
tf† (num == text)†{ 
glert(" 正 解 で す "): 
+else{ 
glert(" 不 正解 で す 。 正解 は "+num+" で し た "): 
} 
}, faqlse): 


時 
Windows Phone で は DC は ん DSE 
参照 )。 


/, 口 | 


テ NYHVAJSH 二 JI EE ES2 ま 店 





ブラ ウザ で index.html を 表示 する と 、 入力 ダイ アロ グ が 義和 
人 力 し 、| OK」 ボ タン を クリ ッ ク し ます 。 「 キャ ン セ ル 」 ボ タン を クリ ッ ク す る と 、 以後 の 処理 を 行わ 
れ ま せん 。 
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| 2 ブ トブ ロン フト : 
1 3 の 1 慎 を 入れ で だ さい 





「O0K」 ボ タン が クリ ッ ク す る と 、 確 認 の ダイ アロ グ が 表示 され ます 。 | キャ ン セ ル 」 ボ タン を クリ ッ 
ク す る と 、 以後 の 処理 を 行わ れ ま せん 。 





正解 の 場合 に は 、 正解 を 示す アラ ー ト ダイ アロ グ が 表示 され ます 。 








テ NTHNAJUSH 二 けい | に だ に 2 さ | 
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テ ナ NHWANISNH よ けり | に たま:4 ミ は 
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還 選 E ビ ビ TI 口 届 -117 プ mw アラ ー ト ダイ アロ グ / 確 認 ダ イア ログ / 入 力 ダ イア ログ を 表示 する 


各種 ダイ アロ グ を 表示 する に は 
giM 剛 「alert()」 confirm()」 「prompt()」 メソッド を 使う 


プラ ウザ に は 、 次 の 表 の ダイ アロ グ が 用 意 さ れ て いま す 。 


タイ 2 





確認 ダイ アロ グ 
入力 ダイ アロ グ 


いずれ $ ゃ 最初 の パラ メー タ は 、 ダ イア ログ に 表示 する メッ セー ジ を 指定 し ます 。「confrm 
() 」 メ ソノ ッ ド で は 、| は い 」 ボ タン が クリ ッ ク さ れ た 場合 は 「true」、 そう で な い 場 合 は [false 」 
を 返し ます 。 

| prompt() 」 メ ソ ッ ド で は 、 2 番目 の パラ メー タ に 最初 か ら 入 力 済 み の 文 字 列 を 指定 し 
て お く こ と が で きま す 。 | prompt()) 」 メ ソ ッ ド は 、 ユー ザー が 入力 し た 文字 列 を 返し ます 。 
仏 値 で あっ て も 文字 型 で 返す の で 、 演 算 処理 を 行う 場合 は [parseInt() 」 や 「parseFloat 
り 」 な ど を 使っ て 数 値 型 に 変換 する 必要 が あり ます 。「prompt() 」 で [キャンセ ル 」 ボ タ 
ン が クリ ッ ク さ れ た 場合 に は 、 戻り 値 は 「null」 に な り ま す 。 その た め 、 文字 列 が 入力 され た 
か どう か は 、| prompt( 」 の 戻り 値 が 「null」 か どう か を 調べ れ ば よい こと に な り ま す 。 


sia に 表示 で き な い 文字 


文字 に よっ て は 、 ダイ アロ グ に 表示 で き な い 文字 が あり ます 。 書体 に 登録 さて てい ない 
場合 や 、 サロ ゲー トペ ア を 利用 し た 文字 は ダイ アロ グ に 表示 され ませ ん 。 な お 、 サロ ゲー 










ナナ Mi 


Windows Phone(75) に 搭載 され て いる ブラ ウザ (IE9) で は [alert() 」 メ メド と [confrm 


り 」 メ ノッ ド は 使え ます が 、「prompt() 」 メ ノッ ド は 使う こと が で きま せん 。「prompt() 」 メ ノッ 
ド を 呼び 出し て も 画面 に は 何 も 表 示さ れず 、 エラ ー メ ッ セ ー ジ な ども 出 ませ ん 。 





関連 項目 ょ ょ ぁ 
ゅ モー ダル ダイ アロ グ を 表示 する 本 ーー バ ム 人 ネー ニー に ドド ドド トド トト ーー D.8 ] 


|IE9 」 


SE も も EN > 


モー ダル ダイ アロ グ を 表示 する 








ここ で は 、 モー ダル ダイ アロ グ を 表示 する 方 法 に つい て 解説 し ます 。 


= ます 中 下 mmls】= 着 HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<meta charset="utf-8"> 
<ttt1e>Sqmplte</ て 1tte> 
<SCrtpt src="]S/sampLe .]S "></SCrtDt> 
</head> 
<body> 
<OuUtDu キ ></Ou て Dut> 
</body> 
</html> 


HTML の コー ド (input.html) 


<!DOCTYPE html> 
<html> 


アグ 下 





<head> 
<meto charset="utf-8"> 
<tttte>Dtalog</t1tLe> 
</head> 
<body> 


<form> 


JSTMIN EE だ IE に 248 に | 


7 
る 


テ NYHN 


名 前 :<tnput type="text" nagme="uNgme" 1d="uName "> 
<tnput type="button" value=" 設 定 " 1d="setBtn"> 
</form> 
<Output 1d="PeSult "></OutDut> 
<SCP1Dt> 
// ボタ ン に イベ ント を 設定 
var btn = document.getEtementById("setBtn"): 
btn .aqddEventLtstener("cltck"。 functton()+ 
var text = document.getELementBy1dC"uName").vqtue // 入力 され た 内 容 を 返す 
win0bject.returnVatue = text: // 呼び 出し 元 に 返す デー タ 
window.ctose(): // ダイ アロ グ を 閉じ る 
+。fqlse): 
// 呼び 出し 元 か ら 渡 され た パラ メー タ を 表示 
var wtnOb]ject = wtndow.dtqlogArgumentS: 
document.getEtementByTd("result").1tnnerHTML = wtnOb]ect: 
</sCr1Dt> 
</body> 
</html> 
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7 作画 
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JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oad"。 functton(){ 
var ele = document.getEtementsByTagName( "output")[9@] : 
// モー ダル ダイ アロ グ を 表示 
var text = showModalDtalog(" ./tnput.html", window, "diqtogWitdth=32 の px : dialogHetght=249px : "): 
// 入力 結果 を 表示 
ele.1tnnerHTML = wtndow.returnValue: 
}, fatse): 


ブラ ウザ で index.html を 表示 する と モー ダル ダイ アロ グ が 表示 され 、 名 前 を 入力 し て 「 設 
定 」 ボ タン を クリ ッ ク す る と 、 モー ダル ダイ アロ グ の 呼び 出し 元 に デー タ が 返さ れ 、 モー ダル ダイ 
アロ グ か ら 返 され た 文字 列 が ペー ジ 上 に 表示 され ます 。 





モー ダル ダイ アロ グ を 表示 する に は 
いい 「showModalDialog() 」 メソ ッ ド を 使う 


モー ダル ダイ アロ グ を 表示 する に は 、「showModalDialog() 」 メソ ッ ド を 使い ます 。 
| showModalDialog() 」 メ ソ ッ ド は 、 呼び 出し た ダイ アロ グ で の 処理 が 終わ る まで 、 次 
の 行 に 処理 が 移り ませ ん 。 

| showModalDialog() 」 メ ノッ ド の 最初 の パラ メー タ に は 、 ダイ アロ グ 内 に 表示 する 
HTML フ ァイル の URL を 指定 し ます 。 2 番目 の パラ メー タ に は 、 モー ダル ダイ アロ グ に 渡 
す パ ラメ ー タ を 指定 し ます 。 この と き 、「window」 オ ブ ジ ェクト を 指定 する こと で 呼び 出し 
元 と ゲー タ の や り 取 り を 行う こと も で きま す 。 2 番目 の オプ ショ ン は 省略 する こと も で きま す 。 

3 番目 の パラ メー タ は 、 次 の 表 に 示す オプ ショ ン を 指定 する こと が で きま す 。 これ る 省略 
する こと が で きま す 。 


ダイ アロ グ を 中 央 に 表示 する か どう か (yes/no) 

リサ イズ 可能 か どう か (yes/no) 

スク ロー ル バ ー を 表示 する か どう か (yes/no) 

まわ り の エッ ジ ( 枠 ) を 表示 する か どう か (yes/no) 。 IE の み 
ステ ー タ スバ ー を 表示 する か どう か (yes/no) 。 IE の み 


外観 指定 (yes/no) 。 IE の み 



















































関連 項目 ょ | 「 
* アラ ー ト ダイ アロ グ / 確 認 ダ イア ログ / 入 力 ダ イア ログ を 表示 する …………………… p.278 


LIE6 1 Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS5 」 Android 2 』WP 


=1 コ maglmlNlk= 
タイ マー を 設定 ・ 懇 除 する 


ここ で は 、 タイ マー を 設定 ・ 解 除 す る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<ttt1e>Sqmple</t1tle> 
<SCrtpt src="]Ss/sample.]S "></SCr1Dt> 
</hegd> 
<body> 
<form> 
<tnput type="button" vatue=" タ イマ ー 開 始 " 1d="startBtn"> 
<input type="button" vatue=" タ タイマー 終了" 1d="stopBtn"><br> 
</form> 


<OutDut></OutDut><DbP> 





<OUtDUut キ ></OU て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .addEventListener("1oad" 。 functton(){ 


INNAIN」 EE だ TIEE4 ミ gs 


7 
る 
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var ele = document.getEtementsByTagName( "output"): 
// タイ マーID を 入れ る 変数 を 用 意 
var ttmerTD = null: 
// 開始 ボタ ン に イベ ント を 割り 当て 
document . getELementById( "stgrtBtn") .addEventLitstener("cttck" functton()1 
tf (!ttmerTD){ 
ete[1] .tnnerHTML = "タイ マー を 起動 させ まし た ": 
// 1 秒 ご と 時 間 を 表示 する 
ttmerTD = setTtmeout(functton(){ 
// 時 間 を 表示 
ele[9] .tnnerHTML = new Date(): 
// 現在 の タイ マー を さら に 呼び 出し 
ttmerTD = setTtmeout(arguments .caltee, 1999): 
+, 1990): 
+else{ 
ele[1] .innerHTML = "すでに タイ マー は 起動 中 で す ": 
} 
+, false): 
// 終了 ボタ ン に イベ ント を 割り 当て 
document.getEtementByIdC"stopBtn") .gddEventLitstener("cLtck"。 functton()1 
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tf (!ttmer1D){ N4 
ele[1] .tnnerHTML = "タイ マー は 停止 し て いま す ": 

}else{ 
ele[1] .innerHTML = "タイ マー を 停止 させ まし た ": 
ctearTtmeout(ttmerTD): 
ttmerTD = null: 

} 

}, faqlse): 
}, fglse): 


プラ ウザ で index.html を 表示 し 、「 タイ マー 開始 」 ボ タン を クリ ッ ク す る と 、 タイ マー が スタ ー ト 
し て 現在 時 刻 が 1 秒 ご と に 表示 され ます 。 


\ 1 由 タ 2 イマ 6 - 生 人 
Sun Apr 15 18.10-01 UTC+0900 2012 


品 タイ マー を 起動 させ まし た 
ヽ 





さら に | タイ マー 開始 」 ボ タン を クリ ッ ク す る と 、 タイ マー が 動作 中 で ある メッ セー ジ が 表示 され 
ます 。 


テ NYHNAJSNH よ MINI EE だ EE に 4Sm 


Sun Apr 15 18-10-06 2012 
すでに タイ マー( は 起動 中 で す 





| タイ マー 終了 」 ボ タン を クリ ッ ク す る と 、 タイ マー が 停止 し ます 。 


タイ マー 開 94 
Sun Apr 15 18-10-07 UTC+0900 2012 


タイ マー を 停止 させ まし た 
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還 還 本 誠 生計 タイ マー を 設定 する に は 「setTimeout り 」 メ ソ ッ ド 、 
タイ マー を 解除 する に は 「clearTimeout()」 メ ソ ッ ド を 使う 


指定 時 間 後 に 処理 を 行う に は 、|「setTimeout () 」 メ ノッ ド を 使い ます 。| setTimeout 
() 」 メ ソ ッ ド の 最初 の パラ メー タ に 実行 する 処理 (文字 列 で 命令 を 囲む か 、 無名 関数 
で 処理 を 記述 する ) 、 2 番目 の パラ メー タ に は ミリ 秒 を 指定 し ます 。 た だ し 、 2 番目 に 指定 


し た ミリ 秒 後 に 必ず し ゃ 処理 が 実行 され る 保証 は あり ませ ん 。 環境 に よっ て は 、 指定 し た 
ミリ 秒 よ り 後 に 実行 され る こと が あり ます (指定 し た ミリ 秒 より 前 に 実行 され る こと は な い ) 。 
「setTimeout() 」 で タイ マー を 設定 する と 、 戻り 値 と し て タイ マーID が 返さ れ ま す 。 

タイ マー を 停止 させ る 場合 は 「clearTimeout() 」 メ ソ ッ ド を 使い 、 パラ メー タ に タイ マー 
ID を 指定 し ます 。 この タイ マーID は 、「 setTimeout() 」 メ ソノ ッ ド の 戻り 値 に な り ま す 。 


mm 細 昌 IN 還 較 |SGtTirmGOUt( )」 メソ ッ ド の d 番 目 以降 の パラメータ 


「setTimeout() 」 メ ソ ッ ド に は 、 3 番目 以降 の パラ メー タ を 指定 する こと が で きま す (IE 
を 除く ) 。 3 番目 以降 の パラ メー タ は 、「 setTimeout() 」 メ ソ ッ ド で 呼び 出さ れる 関数 の パ 
ラメ ー タ と し て 渡さ れ ま す 。 た と えば 、 次 の よう に する と 、 1 秒 後 に アラ ー ト ダイ アロ グ に メッ 
セー ジ が 表示 され ます 。 












ttmerTD = setTtmeout(functton(msg)†+ 
alert(msg): 
+。 1999, "test message"): 





関連 項目 ょ ゅ 
@e@ イン ター バ ル タイ マー を 設定 解除 する eroeoooooeoemmeeererrr D.286 
e アニ メー ショ ン 同 期 タ イマ ー を 設定 ・ 解 除 す る …… の ぐー ドド rr p.289 
e タブ を 切り 換え た 場合 に 処理 を 行う …… ee p.859 
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7 男 


LIE6 』Chrome Safari 5 | Firefox 4 』 Opera11 IiOS4 1 Android2 」 


1 コ miMlmIN レ im 
イン ター バル タイ マー を 設定 ・ 解 除 する 


ここ で は 、 イン ター バル タイ マー を 設定 ・ 解 除 す る 方 法 に つい て 解説 し ます 。 
ド HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
v <metg chagrset="utf-8"> 
<tttle>Sample</ttt1e> 
ロ | <SCrtDpt src="]S/sqmple.]S"></scrtpt> 
| </head> 
<body> 
<formm> 
<tnput type="button" vglue=" イ ンタ ー バ ル タ イ マー 開始 " id="stgrtBtn"> 
<tnput type="button" vatue=" イ ンタ ー バ ル タ イ マー 終了 "id="stopBtn"><br> 
</form> 
<OutDut></OutDput><bP> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . oddEventLtstener("1oad" 。 functton(){ 
ーー var ele = document.getEtementsByTogName( "output"): 
ー| // タイ マーTID を 入れ る 変数 を 用 意 
和 var ttmerID = null: 
0 // 開始 ボタ ン に イベ ント を 割り 当て 
documernt.getElementById("startBtn").gddEventListener("ctLtck"。function(){ 
tf (!ttmerTD){ 
ele[1] .innerHTML = "イン ター バル タイ マー を 起動 させ まし た ": 
// 1 秒 ご と 定期 的 に ミリ 秒 を 表示 する 
ttmerTD = setIntervat("dtsptaqyTtme()", 1909): 
+etse{f 
ete[1] .tnnerHTML = "すでに イン ター バル タイ マー は 起動 中 で す ": 
} 
+, false): 
// 終了 ボタ ン に イベ ント を 割り 当て 
document.getElLementByTd("stopBtn").qddEventLitstener("ctitck", functton(){ 
tf C!timerTD){ 
ete[1] .innerHTML = "イン ター バル タイ マー は 停止 し て いま す ": 
#elset 
ete[1].tnnerHTML = "イン ター バル タイ マー を 停止 させ まし た ": 


clegrIntervat(ttmerTD): 











ロ 
び 





| 
“ 1 
テ NHNAJH よ JIN EE に IE に 4 ミ 8m 
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ttmerTD = nulLt: k る 4 
} 

+。fqlse): 
+,。 false): 
// 定期 的 に 呼び 出さ れる 処理 
functton dtsptayTtme()+ 

var ele = document.getElementsByTagName( "output"): 

ele[9] .1nnerHTML = (new Date()).getT1me(): 
} 


ブラ ウザ で index.html を 表示 し 、| イン ター バル タイ マー 開始 」 ボ タン を クリ ッ ク す る と 、 イ ンタ ー 
バル タイ マー が スタ ー ト し て 現在 の ミリ 秒 が 表示 され ます 。 





イン ター バル タイ マー を 起動 させ まし た ロ 
* 1 
> へ ヽ J 
ゴ 
「T 
刀 
フ 
放 ツ 
ゥ 
に 「 イ ンタ ー バ ル タ イ マー 開始 」 ボ タン を クリ ッ ク す る と 、 イン ター バル タイ マー が 動作 中 で 人 
ある メッ セー ジ が 表示 され ます 。 ジ 
て 


[イン ター バル 27 マ ラニ 開始 ] に インタ ニョ ル タ 


1334485975647 
すでに イン ター バル タイ マー[ は 起動 中 で す 





「 イン ター バル タイ マー 終了 」 ボ タン を クリ ッ ク す る と 、 イン ター バル タイ マー が 停止 し ます 。 


0 机 
イン ター バル タイ マー を 停止 させ まし た 





28/ 





テ NYHNAJSH は MINJ EE まき ES2 ミ Fa 
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還 ビビ ピロ 丁 | 口 N-12 ロ m イン ター バル タイ マー を 設定 ・ 解 除 す る 


3 ミュン ター バル タイ マー を 設定 する に は 「setlnterval()」 メ ソ ッ ド 、 
解除 する に は 「clearlnterval() 」 メソッド を 使う 


一 定時 間 ご と に 処理 を 行う に は 、「setInterval() 」 メ ノッ ド を 使い ます 。 「setInterval() 」 
メソ ッ ド の 最初 の パラ メー タ に 実行 する 処理 (文字 列 で 命令 を 囲む か 、 無名 関数 で 処理 を 
記述 する ) 、 2 番目 の パラ メー タ に は 定期 的 に 処理 する ミリ 秒 を 指定 し ます 。 た だ し 、 2 番目 
指定 し た ミリ 秒 ご と に 必ず し も 処理 が 実行 され る 保証 は あり ませ ん 。「setInterval() 」 で 


タイ マー を 設定 する と 、 戻り 値 と し て タイ マーID が 返さ れ ま す 。 

タイ マー を 停止 させ る 場合 は 「clearInterval() 」 メ ソ ッ ド を 使い 、 パラ メー タ に タイ マー 
ID を 指定 し ます 。 この タイ マーID は 、「setInterval() 」 メ ソ ッ ド の 戻り 値 に な り ま す 。 

な お 、| setInterval() 」 メ ソ ッ ド も | setTimeout() 」 メ ノッ ド と 同様 に 、 3 番目 以降 の パラ 
メー タ を 指定 する こと が で きま す 。 この 場合 、| setInterval() 」 メ ソ ッ ド で 呼び 出さ れる 関 
数 に パラ メー タ と し て 渡 き れ ま す 。 


関連 項目 








e タイ マー を 設定 ・ 解除 する 人 を he な CE 粒 CeeeyeE こ 2000 2 p.283 
@ アニ メー ショ ン 同 期 タ イマ ー を 設定 解除 する ンジ ツゲ すっ で りす た ペー で の 人 人 則 が D. ど 89 
ッ タ タプ だ 革 機 学 た 縛 和 折 坦 馬 科 p.859 


LIE 10 1 Chrome 」 


=1 コ gglmlNB レ も 
アニ メー ショ ン 同 期 タ イマ ー を 設定 ・ 解 陸 す る 


ここ で は 、 アニ メー ショ ン 同 期 タ イマ ー を 設定 ・ 解 除 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<heqd> 
<meta charset="utf-8"> 
<ttt1e>Samplte</t1 せ le> 
<SCPtDt src="]S/sample.]S "></SCr1Dt> 
</head> 
<body> 
<form> 


<tnput type="button" vatue=" ア ニ メ タ タイマー 開始" id="startBtn"> 





<tnput type="button" vatue=" ア ニ メ タ タイマー 終了" 1d="stopBtn"><br> 長 
</form> し 
<OutDut></OutDut><Dbr> M 
<OUtDut></OutDut> ブ [ 

</body> ピン 
</html> サ 
2 

JavaScript の コー ド (sample.jS) 9 
wtndow . addEventLtstener("1oad" 。 functton()+ ク 


var ele = document.getEtementsByTagName( "output" ): 

// ベン ダー プレ フィ ックス を 考 護 

wtndow. requestAntmattonFrame = wtndow.requestAntmattonFrame || 
wtndow . webkttRequestAntmattonFrame | 
wtndow .mozRequestAntmattonFrame | 
wtndow .msRequestAntmattonFrame : 

wtndow.cancelAntmattonFrame = wtndow.cqncelAntmattonFrame || 
wtndow.webkttRequestAntmattonFrame | 
wtndow.mozCancelAntmattonFrame | 
window.msRequestAntmattonFrame : 

/ すず ネ エッ タダ 

tf (!wtndow.requestAntmattonFrame){ 
ele[9] .innerHTML = "機能 が 実装 され て いま せん ": 
PetuPn: 

} 

// タイ マーID を 入れ る 変数 を 用 意 

var ttmerTD = null: 

// 開始 ボタ ン に イベ ント を 割り 当て 

document . getELementById( "startBtn") .qddEventLtstener("cltck",。 functton(){ 
tf (!ttmerTD){ 
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ele[1].innerHTML = "アニ メタ イマ ー を 起動 させ まし た ": ふる 
// 1 秒 ご と 時 間 を 表示 する 
ttmerTD = wtndow.requestAnimattonFrame(functton(){ 
// 時 間 を 表示 
ele[9] .1nnerHTML = new Date(): 
// 現在 の タイ マー を さら に 呼び 出し 
ttmerTD = wtndow.requestAntmattonFrame(arguments .callee): 
} う : 
+elset 
ele[1] .tnnerHTML = "すでに アニ メタ イマ ー は 起動 中 で す ": 
} 
+,。fqlse): 
// 終了 ボタ ン に イベ ント を 割り 当て 
document.getEtementById( "stopBtn").qddEventLtstener("cltck"。functton(){ 
tf (!ttmerTD){ 
ele[1] .tnnerHTML = "アニ メタ イマ ー は 停止 し て いま す ": 
+elset 





ぃ /,「] 較 守 中 


ele[1] .innerHTML = "アニ メタ イマ ー を 停止 させ まし た ": 

9 wtndow.cancelAntmattonFrame(ttmerID): 

中 ttmerTD = null: 

れ 
古 | ブ } 
Q| ラ +, faqlse): 
= の +, false): 
p| オ 

且 プラ ウザ で index.html を 表示 し 、「 ア ニ メ タ イマ ー 開 始 ] ボ タン を クリ ッ ク す る と 、 タイ マー が ス 

| クタ タート し て 現在 日 時 が 1 秒 ご と に 表示 され ます 。 


Ma mW j fle:/ 位 Y ご 『 中 Goo | 舎 


Es= 間 6 | ッ = タ dsak。 


Sun Apr 15 2012 2001 04 GMT+0900 
アニ メタ イマ ー を 起動 させ まし た 





さら に | アニ メタ イマ ー 開 始 」 ボ タン を クリ ッ ク す る と 、 タイ マー が 動作 中 で ある メッ セー ジ が 表 
示さ れ ま す 。 


人 2 3 全 ま まな 2 二 CN に ER 
上 | … の >・c 9- co っ 


Sun Apr 15 2012 2001 10 GMT+0900 
すでに アニ メタ イマ ー( は 起動 中 で す 





「 アニ メタ イマ ー 終 了 」 ボ タン を クリ ッ ク す る と 、 タイ マー が 停止 され ます 。 
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Sun Apr 15 2012 2001.11 GMT+0900 
アニ メタ イマ ー を 停止 させ まし た 


衣 が 実装 され て いま せん 





アニ メー ショ ン 同 期 タ イマ ー を 設定 する に は 「windowrequestAnimationFrame()」 
メソ ッ ド 、 解除 する に は 「window.cancelAnimationFrame()」 メソッド を 使う 


「setTimeout() 」 メ ノッ ド や | setInterval() 」 メ ソ ッ ド で 個別 に アニ メー ショ ン さ せる と 、 そ 
れ ぞ れ 処 理 さ れ て し まう た め 、 描 画 タ イミ ング が 合わ な か っ た り 、 負 和 荷 の 原因 に な っ た りす る 
場合 が あり ます 。 そ こ で 、 描 画 タ イミ ング に 合わ せ て 処理 する タイ マー が | window.request 
AnimationFrame () 」 メ ソ ッ ド で す 。 

「window.requestAnimationFrame () 」 メ ノッ ド の パラ メー タ に 実行 する 処理 (文字 
列 で 命令 を 囲む か 、 無名 関数 で 処理 を 記述 する ) を 指定 し ます 。| window.request 
AnimationFrame() 」 メ ソ ッ ド は 戻り 値 と し て タイ マーID を 返し ます 。 

「 window.requestAnimationFrame () 」 メ ソ ッ ド で 実行 し た タイ マー を 停止 させ る に 
は 、「window.cancelAnimationFrame( 」 メ ソ ッ ド を 使い ます 。 パラ メー タ に は タイ マー 
ID を 指定 し ます 。 この タイ マーID は 、| windowrequestAnimationFrame () 」 メソ ッ 
ド の 戻り 値 に な り ま す 。 な お 、「windowmozCancelAnimationFrame() 」 メ ノッ ド は 、 
Firefox 11 以 降 で 対応 し て いま す 。 


ロロ NEP ロ INT 





mmi 員 時に 較 ペン ダー プレ フィ ックス に つい て 

「requestAnimationFrame() 」 メ ソ ッ ド に 限ら ず 、 試験 的 な 機能 に 関し て は 、 ベン 
ダー プレ フィ ックス が メソ ッ ド や プロ パテ ィ 名 の 先頭 に 付く 場合 が あり ます 。 どの よう な プレ 
フィ ックス が 付く か は 、 次 の よう に 決ま っ て いま す 。 





| moz | Fieefox 
0 
関連 項目 ゅ 
『] タイ マー な を 設定 5 解除 する 2 や で も を で や を Y ツ いで ヤマ た を ザイ サド D.83 
の イン ター/ 人 ル タ イ マー を 設定 8 解除 する (6 深江 も る 0 D.C86 
の タブ 左 切り 換え た 場合 に 処理 を 行う 信光 光生: 人 あせ 0 0 D.859 





テ NYHWNAJUS 二 りり に に まき に 4 


=1 ゴ FMlmIN 生 レレ 
非同期 処理 を 行う 


ここ で は 、| setlmmediate () 」 メ ソ ッ ド を 使っ て 非同期 処理 を 行う 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<metqg charset="utf-8"> 
<tttle>Sample</t1t1e> 
<SCrtDt src="]s/sqmple.]S"></scrtpt> 
</head> 
<body> 
<form> 
<tnput type="button" vgtue=" 非 同期 処理 開始 " 1d="startBtn"> 
</forW> 
< く OU モ DUt></OutDut> 
</body> 
</html> 








ら 口 L ロ | 


| 


記 口 


| gal| snll セロ | 


ん し 


こい AKGAW い WW ココ コマ ロロ 





JavaScript の コー ド (sample.js) 
wtndow.aqddEventListener("toad" functton(){ 
// ベン ダー プレ フィ ックス を 考慮 
wtndow. setImmedtate = window.setTmmedtate || wtndow.msSetTmmedtote: 
ー wtndow.clearTmmedtate = wtndow.clear1Tmmedtate || wtndow.msCLearTmmedtate: 
/ 開始 ボタ ン に イベ ント を 割り 当て 
documert.getELementById("startBtn") .addEventLtstener("cltck"。functton(){ 
に // 非同期 処理 1 を 実行 
1 var tmmedtateTD = wtndow.setTmmeditate(prtmeNumber): 
ー // 非同期 処理 2 を 実行 
wtndow. setImmedtate(prtmeNumber): 
// 非同期 処理 3 を 実行 
wtndow. setImmedtate(prtmeNumber): 
// 非同期 処理 4 を 実行 
wtndow . SetImmedtgte(prtmeNumber): 
}, false): 
+, false): 
// 時 間 が か か る 処理 
// 19999 ま で の 最大 の 素数 を 求め る 
functton prtmeNumber() { 
var ele = document.getElementsByTagName( "output")[9] : 
Var Pesult = 2: 
for (var 1=Z: 1<=19999: 1++) { 
var flaqg = fatse: // 素数 フラ グ を リセ ッ ト 
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for (var ]=2: ]<1: ]++) { 修作 
if (G % ]) デ 9⑨) { flgg = truei } // フラ グ を セッ ト 
} 
tf (flag == false) { result =1: } 
} 
ele.tnnerHTML += "素数 計算 が 終了 し まし た 。 "+resutt+" : "+Date .nowC)+"<br>": 
} 


ブラ ウザ で index.html を 表示 し 、| 非同期 処理 開始 」 ボ タン を クリ ッ ク す る と 、 10000 ま で の 
最大 の 素数 を 求め る 関数 が 非同期 で 4 つ 起 動 し ます 。 





非同期 処理 が 完 了 す る と 、 メッ セー ジ と 最大 の 素数 、 そし て 時 間 (ミリ 秒 ) が 表示 され ます 。 





ピナ 


雪 数 計算 が 終了 し まし た 。 9973 - 1336313299743 | 表 数 計算 が 終了 し まし た 。 - 1336313299743 
素数 計算 が 終了 し まし た 。 9973 - 1336313300553 素数 計算 が 終了 し まし た 。 - 1336313300553 
素数 計算 が 終了 し まし た 。 9973 - 1336313301387 | 素数 計算 が 終了 し まし た 。 - 1336313301387 

素数 計算 が 終了 し まし た 。 - 1336313302220 


テ NHNAJNH より に に ま 導 に 4 さば 





TavaScript で 非同期 処理 を 行う に は 、「setTimeout () 」 メ ソ ッ ド や Web Workers を 
使う 以外 に 、| setlmmediate() 」 メ ソ ッ ド を 使う 方 法 が あり ます 。 | setImmediate()」 の 
パラ メー タ に 、 非同期 で 処理 し た い 関 数 名 を 指定 し ます 。「setImmediate() 」 メ ノッ ド 
を 使い 呼び 出し た 処理 を 停止 する に は 、| clearImmediate() 」 メ ノッ ド を 使い ます 。 


ピロ LUMN 


処理 速度 は 低下 し ます が 、| setTimeout (関数 名 , 0) 」 と し て 非同期 処理 を 行う 方 法 
も あり ます 。 また 、 Web Workers を 使っ て 非同期 処理 を 行う こと も で きま す 。 





関連 項目 ゅ 


者 の の Jie 誠人 409ptM は ECRtS5247RM2HA な htcih87SVMku 4 D.751 
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ー】 = 下村 肖 関 1 間 1 導 キ ー ザ こ 


ドキ ュ メ ント の タイ トル を 取得 ・ 設 定 する 


MT ここ で は 、 ド キュ メン ト の タイ トル を 取得 ・ 設 定 する 方 法 に つい て 解説 し ます 。 
ロ HTML の コー ド (index.html) 


rd <!DOCTYPE html> 
<html> 
本 <hegd> 
<meta charset="utf-8"> 
_ <tttte>JavaScrtpt Sample</t1tle> 
- <SCrtDpt src="]S/sample.]S"></sCrtDt> 
</head> 
_ ロ <body> 
較 <form> 
<input type="button" value=" タ イト ル を 読み 出し "> 
<input type="button" vglue=" タ イト ル を 設定 "> 
</for> 
<OutDut></OutDut> 
</body> 
</html> 








| 


テ NHVAJNH よ NM EE だ EE に 4 8 


記 口 


6 ロ || 


JavaScript の コー ド (sample.j5) 
wtndow. gddEventLtstener("togd", functton(){ 
var btn = document .getEtementsByTagName( "1nput"): 
// ボタ ン に イベ ント を 割り 当て 
btn[9] .oddEventLtstener("cttck"。 functton(){ 
// ドキ ュ メ ント の タイ トル を 読み 出し 
var text = document .tttle: 
// 結果 を 出力 
で document.getElLementsByTagName( "output")[9] . innerHTML = text: 
' +,。 false): 
ーー // ボタ ン に イベ ント を 割り 当て 
btn[1] .oddEventLitstener("cLtck"。functton(){ 
// ドキ ュ メ ント の タイ トル を 設定 
document.tttte = "サン プル ": 
},。 foqlse): 
+,。 faglse): 


3 に 





則 sl kl ai 
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プラ ウザ で index.html を 表示 し 、「 タ イト ル を 読み 出し 」 ボ タン を クリ ッ ク す る と 、 ド キュ メン ト の 
タイ トル が 読み 出さ れ て ペー ジ 上 に 表示 され ます 。 





「 タ イト ル を 設定 」 ボ タン を クリ ッ ク す る と 、「 サ ンプ ル 」 の 文字 が タイ トル と し て 設定 され ます 。 


4 男 





= ヨコ ョ lm 引 ドキュメント の タイ トル を 取得 ・ 設 定 す る に は 「title] プロ バテ ィ を 使う 


ドキ ュ メ ント の タイ トル は 「 document 」 オブジェ クト の 「 title」 プロ パテ ィ に アク セス する こ 
と で 読み 出し 、 設定 する こと が で きま す 。 な お 、 スマ ー ト フォ ン 上 で 動作 する プラ ウザ で は 
タイ トル が 表示 され な いも の も あり ます 。 





テ ナ NYHNA へ JUSH より JIN EE に まき E に 4 8 は 
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EE。 ます JNN-1 2 
ドキ ュ メ ント 内 に 出力 する 


ここ で は 、 ド キュ メン ト 内 に 出力 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq Charset="utf-8"> 
<tttle>SqmpLe</t1 せ 1e> 
</head> 
<body> 
<ht>wrtteC) サ ンプ ル </h1> 


<SCP1Dt src="]S/sample.]S"></scrtpt> 





</body> 
</html> 


JavaScript の コー ド (sample.js) 
// ドキ ュ メ ント (ペー ジ ) に 出力 
document .wrtte( "祇園 精舎 の 鐘 の 声 <br> 諸 行 無常 の 響き あり "): 


ブラ ウザ で index.html を 表示 する と 、| document.write () 」 メソッド を 使っ て 出力 し た 文字 
が 表示 され ます 。 


テ NYHWANISH より MINI EE に IE に 4 ミ a 


write) サンプル 


区 園 精 舎 の 鏡 の 声 
諸 行 無常 の 故 き あり 





=i=lE 下 ペー ジ へ の 出力 を 行う に は 「document.write() 」 メソッド を 使う 


ペー ジ 上 に 文字 や 画像 を 出力 する 場合 、 大 きく 分 け て 2 つの 方 法 が あり ます 。 1 つ は 、 
ペー ジ 構 築 が 完了 する 前 に | document.write() 」 を 使う 方 法 で す 。 も う 1 つ は 、 ペー ジ 


構築 和俊 に DOM を 操作 する メソ ッ ド を 使う 方 法 で す (366 ペ ー ジ 参照 ) 。 

| document.write() 」 は 、 ペー ジ 構 築 後に 使用 する と 、 予期 せ ぬ 結果 を 招く こと が あ 
り ま す 。 また 、| document.write()」 を 使っ て いな い 場 合 、| script」 要素 に 「async」 属 
性 を 指定 する こと で 、 ペー ジ の 構築 処理 を 高速 化す る こと が で きま す 。 
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だ 記す ENN-1 らら 


クッ キー に 書き 込み が 可能 か どう か 調べ る 








ここ で は 、 クッ キー に 書き 込み が 可能 か どう か 調べ る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte> Saqmpte</t1t1e> 
<scrtpt src="]s/sample.]S"></SCrtDt> 
</head> 
<body> 
<OUtDu キ ></OUDut キ > 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .addEventListener("1ogd" 。 functton()+ 





var ele = document.getEtementsByTagName("output")[9]: 

// クッ キー に 書き 込み が で きる か どう か 調べ る 

var flag = navtgator.cookteEnagbled: 

// 結果 を 出力 

tf (flag === true)+ 
ele.innerHTML = "クッ キー に 書き 込み で きま す ": 

+etse{ 
ele.tnnerHTML = "クッ キー に 書き 込め ませ ん ": 

} 

}, faqlse): 


テ ナ NYHVAJSL 二 MI い | に に IE に 4 ミ は 


ブラ ウザ で index.html を 表示 する と 、 ク ッ キ ー に 書き 込め る か どう か の 結果 が 表示 され ます 。 


クッ キー に 書き 込み で きま す 





29/ 


男 
NN 





テ ナ NYHNANJUH は JIN に EE に 4 ミ Sm 
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還 E ビ TIHN-125 mw クッ キー に 書き 込み が 可能 か どう か 調べ る 


ロ NEPD ロ INT クッ キー が 利用 で きる か 調べ る に は 「cookieEnabled」 プロ パテ ィ を 使う 





デー タ を 保持 で きる と いう 点 で 、 クッ キー は 古く か ら 利 用 され て いま す 。 この クッ キー に 
書き 込み が で きる か どう か は 、「navigator」 オ プ ジ ェ クト の 「cookieEnabled | プロ パテ ィ 
を 参照 し ます 。「true]」 で あれ ば 書き 込み が 可能 、「false」 で あれ ば 書き 込み は で き な い 
こと に な り ま す 。 

デー タ を 保存 する 際 、 クッ キー に は 制限 が あり ます 。 より 多く の デー タ を 保存 する よう な 
場合 は 、 ロー カル スト レー ジ を 利用 する の が よい で し ょ う 。 また 、 一 時 的 な デー タ の 保存 で 
あれ ば 、 セッ ショ ンス トレ ー ジ を 利用 する 方 法 も あり ます 。 また 、 ファ イル と し て 保存 する よう 
な 場合 は 、File API を 利用 する の が よい で し ょ う 。 









関連 項目 
本 2 の 0 党 ei 放 本 幸二 SGDAeUAIEI p.299 





[IE6 Chrome 1 Safari 5 | Firefox 4 1 Opera 11 | iOS4 1 Android 2 WP_ 


ED ロビ TIHN-1266 


クッ キー の 読み 書き を 行う 








- こ で は 、 クッキ ー の デー タ の 読み 込み と 書き 込み 方 法 に つい て 解説 し ます 。 
= まや 中 需 結 mg 慎 HTML の コー ド (index.htmD) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<ttt1e>SqmpLe</t1tle> 
<scrtpt src="]Ss/sqmple .]S "></SCr1tpt> 
</head> 
<body> 
<h1i> ク ッ キ ー の 読み 書き </h1> 
<formW> 
書き 込む 内 容 :<tnput type="text" 1d="cData" value="cookte..."><br> 
<tnput type="button" td="cWrtte" value=" ク ッ キ ー に 書き 込み "> 
<tnput type="button" id="cRead" vatue=" ク ッ キ ー か ら 読 み 込み "> 


</form> 





<OUtDut キ ></OutDUt> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .qddEventLtstener("1ogd" functton(){ 


テ ナ NHVAJINL り MI に に NEKM ェ は 


var ele = document.getEtLementsByTagName("output")[9]: 
// 書き 込み ボタ ン に イベ ント を 割り 当て 
document.getEtementByIdC"cWrtte").qddEventLtstener("cltck', functton()+ 
var text = document .getELementById("cData") .vatue: 
// クッ キー に 書き 込み 。 期限 を 2922 年 2 月 15 日 に 設定 
var expDay = (new Date( "2922/2/15")) .toGMTStrtng(): 
var data = "Msg="+escape(text)+":exDPtreS="+eXpDoy: 
document.cookte = datq: 
+,。 foqlse): 
// 読み 込み ボタ ン に イベ ント を 割り 当て 
document.getELementById("cRead").addEventLtstener("cLtcK' , functton(){ 
// クッ キー か ら 読 み 込み 。 変数 dgqta に 代入 
var data = document .cookte: 
ele.innerText = ele.textContent = unescape(dato): 
+, fgalse): 
+。 false): 


回 止 回 還 … 
この サン プル は 、 ロー ー カ レデ バフ クト て Mg い ワラ ウザ ちあ り ます その 場合 は 、 ネッ トワ ー 
ク 環境 (WeDp サ ー バ ー 上 ) で 動作 を 確認 し て くだ さ 
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還 王 E ビ TI ロロ N-12 6 mw クッ キー の 読み 書き を 行う 


プラ ウザ で index.html を 表示 し 、「 書き込み 」 ボ タン を クリ ッ ク す る と 、 クッ キー に デ ー タ と 期 
限 が 書き 込ま れ ま す 。 これ は 、Firebug+Firecookie な どの デフ Mae 
(Firefox 13 以 降 に 対応 し た Firebug で は Firecookie は 不要 )。 


クッ キー の 読み 書き 


書き 込む 内 容 : cgR 研 究 所 。 








| 回 Hsg CSR 研 容 www.openspc2.org 98  /Esti/s, 2022 年 2 月 15 日 0:00:00 
内 寄 生 テ ー タ 
C&R 研 究 所 
6 | 読み 込み 」 ボ タン を クリ ッ ク す る と 、 クッ キー に 保存 され て いる キー と 値 が 多 み 出さ れ て 表示 


され ます 。 


テ ナ NYHNAJSH は MINI EE ま EK4 ミ Fm 


クッ キー の 読み 書き 


書き 込む 内 容 : csR 研 究 所 。 


MegrC&R 研 究 所 時 


| 国 Msg CR 研究 www.openspc2.org 98  /Est1/s. 2022 年 2 月 15 日 0:00:00 
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生 王 ロ 丁 | 口 N-12 6 m クッ キー の 読み 書き を 行う 


= に islNm 下 クッ キー の 読み 書き を 行う に は 「document.cookie] プロ バテ ィ を 使う 


クッ キー の 内 容 を 読み 出す に は 「document.cookie」 プロ パテ ィ に アク セス し ます 。 読 
み 出 され る 内 容 は 「 キ ー= 内 容 」 の 文字 列 に な り 、 同一 ドメイン (も し く は パス ) の デー タ に 
な り ま す 。 

クッ キー に 書き 込む に は 、「 キー 名 = 内 容 :expires= 期 限 」 を | documentcookie」 プ ロ 
パテ ィ に 書き 込み ます 。 複数 の キー と 内 容 を 保存 する 場合 は 、| :] (セミ コロ ン ) で 区 切っ 
て 列記 し ます 。 また 、 保存 する オプ ショ ン は 「expires」 の 期限 だ け で な く 、 次 の 表 の オプ 


ンション も あり ます 。 


| expires | 期限 。 GMT( グ リ ニ ッ ジ 標準 時 / 協 定 世界 時 ) で 指定 
ドメイン 
| secure | セキ ュ ア な 場合 の み ク ッ キー を 送信 。 


な お 、 クッ キー へ の 書き 込み は ロー カル デイ スク 上 で は 動作 し な い 場 合 が あり ます 。 








関連 項目 ょ ゅ 
e クッ キー に 書き 込み が 可能 か どう か 調べ で る Oo D. の 97 


テ NTHNAJUSAH よ JE に に に 4 ミ | 
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LIE6 1 Chrome 1 Safari 5 | Firefox 4 ! Opera11 」 iOS4 1 Android2 1WP 


SE も すま も JNI に 129 / 


ドメイン 名 ・ ホ スト 名 ・ バ ス 名 ・ プ ロト コル を 
求め る 


ここ で は 、 ド メイ ン 名 ・ ホ スト 名 ・ パ ス 名 ・ プ ロト コル を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta Charset="utf-8"> 
<tttle>SqmpLe</t1t1e> 
<SCr1Dt Src="]S/Sammpte.]S"></SCcr1Dt> 
</head> 
<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . qaddEventLtstener( "tood" 。 functton(){ 





var ele = document .getEtementsByTagName( "output")[9] : 
// ドメイン 名 を 読み 出し 
ele.innerHTML = "ドメイン 名 : "+document . domatn: 
// ホス ト 名 + ボ ー ト 番号 を 読み 出し 
ele.tnnerHTML += "<br> ホ スト 名 + ポ ボー ト 番 号 : "+1ocqtton .host: 
// ホス ト 名 を 読み 出し 
ete.1tnnerHTML += "<br> ホ スト 名 : "+Locagtion .hostname : 
// プロ トコ ル 名 を 読み 出し 
ele.tnnerHTML += "<br> プ ロト コル 名 : "+1ocation.protocol: 
// パス 名 を 読み 出し 
ele.tnnerHTML += "<br> パ ス 名 :"+Locatton . pathname : 
+。 false): 


テ ナ NHNAJSH よ MINI EE まき EK に 4SF 


ブラ ウザ で index.html を 表示 する と 、 現在 の ペー ジ の ドメイン 名 ・ ホ スト 名 ・ パ ス 名 ・ プ ロト 
コル が 表示 され ます 。 


ドメイン 名 : www_openspc2.org 
ホス ト 名 + ボ ー ト 番号 :www_.openspc2.org 


ホス ト 名 :www.opcnspc2.org 
プロ トコ ル 名 :htp:- 
バス 名 : /0000/sample/ 
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還 司 ビ ピロ T 口 山 -12 7 還 ドメイン 名 ・ ホ スト 名 ・ バ パス 名 ・ プ ロト コル を 求め る 


齋 請 請 間 了 国 URL 情報 を 取得 する に は 
「locationl オ ブ ジ ェクト と 「document」 オ ブ ジ ェクト の プロ バテ ィ を 使う 


現在 、 表示 され て いる ペー ジ の URL に 関す る 情報 (ドメイン 名 や プロ トコ ル 名 な ど ) は 、 
「location | オブ ジェ クト と [document 」 オブ ジェ クト の 各 プ ロ パ ティ に あり ます 。 それ ぞ れ 
の プロ パテ ィ と 得 ら れる 情報 は 、 表 の よう に な り ま す 。 


ホス ト 名 と ポー ト 番 号 

























テ ナ NHWNAJ よ NTJMINI EE に IE に 48a 
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LIE6 Chrome 』 Safari 5 | Firefox 4 』 Opera 11 | iOS4 1 Android2 IWP_ 


5 上 ED じ DTIHN-12 晶 


直前 に 見 て いた ペー ジ の URL を 求め る 





ここ で は 、 直前 に 見 て いた ペー ジ の URL を 求め る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>SampLe</tttte> 
<SCrtDt src="]S/Sample.]S"></SCr1Dt> 
</hegd> 
<body> 
<h1> 前 に 見 た ペー ジ URL</h1> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oad" 。 functton(){ 





var ele = documert.getElLementsByTagName( "output") う [9] : 
// 以前 見 て いた ペー ジ URL を 読み 出す 
var url = document.referrer: 
// 結果 を 出力 
ele.1tnnerHTML = url: 
}。 faqtse): 


NHN^NIN り AE に EE に 4Sa 


プラ ウザ で index.html を 表示 する と 、 直前 に 見 て いた URL が 表示 され ます 。 な お 、 サン プル 
の 中 に index.html へ の リン ク が ある base.html を 用 意 し て ある の で 、 Web サ ー バ ー の index.html 
と 同じ 階層 に アッ プロ ー ド し て リン ク を クリ ッ ク す る と 、 base.html の URL が 表示 され ます 。 


前 に 見 た ペー ジ URLL 


http-/www_openspc2.org/CR/sample/base html 


本 春 報 直 当 前 に 見 て いた ペー ジ URL を 取得 する に は 


「document.referrer」 プロ パテ ィ を 使う 
アク セス 解析 な ど を 行う 場合 に は 、 前 に 見 て いた ペー ジ の URL が 重要 に な り ま す 。 ス 
クリ プ ト で は 、| document.referrer 」 プロ パテ ィ を 参照 する こと で 1] つ 前 に 見 て いた ペー 
ジ の URL を 取得 する こと が で きま す 。 た だ し 、| documentLreferrer 」 プ ロ パ ティ は 、 前 に 
見 て いた ペー ジ の URL を 取得 で き な い 場合 が あり ます 。 
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LIE6 Chrome 』 Safari 5 」 Firefox 4 1 Opera11 1 OS4 ! Android 2 ! WP 





EEE IEJNー ンコ 
ペー ジ を リロ ー ド する 


ここ で は 、 ペー ジ を リロ ー ド する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>SampLe</t1t1le> 
<SCPtDt Src="]S/sample .]S"></SCrtDt> 
</head> 
<body> 
<h1i> ペ ー ジ リロ ー ド </h1> 
<formW> 
<tnput type="button" vaqlue=" リ ロー ド "> 
</formm> 
<OUtDut></OutDut> 
</body> 
</html> 





= まる 中 間 = コ mimlm】= 直 JavaSCriDt の コー ド (sample.jS) 


wtndow.addEventLtstener("toad" 。 functton()1{ 
var btn = document.getEtementsByTagName( "1nput")[9] : 
// ボタ ン に イベ ント を 割り 当て 
btn.aqddEventLtstener("cltck"。 functton(){ 
// true を 指定 し て 強制 的 に サー バー か ら 読 み 込み 
locatton.reload(true ) : 
+, fqlse): 
// 現在 の 時 間 を 出力 
document .getEtLementsByTagName( "output")[9] .1nnerHTML = new Date(): 
}。 faqlse): 


テ NTHWAJUH せ TMAN に に ま E に 4 ョ a 


ブラ ウザ で index.html を 表示 し 、| リロ ー ド 」 ボ タン を クリ ッ ク す る と 、 ペー ジ が 再度 、 読み 込ま 
れ ま す 。 


14 14-10-26 UTC+0900 2012 
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ナ NHNNJS よ TNI EEN2S 
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m 王 ビ ピロ 丁 | 口 N!-1 つ 9 mw ペー ジ を リロ ー ド する 


= 当 ョ = 中 ペー ジ を リロ ー ド する に は 「reload()」 メソッド を 使う 


ペー ジ を リロ ー ド する 場合 に は 、| location」 オブ ジェ クト の 「 reload () 」 メ ソ ッ ド を 使い ま 
す 。 パラ メー タ に | true」 を 指定 し た 場合 は 、 キャ ッシュ で は な く 〈、 サー バー か ら デ ー タ を 
読み 込み ます 。 パ ラメ ー タ を 省略 する か 、「false」 を 指定 し た 場合 は 、 キ ャ ッシュ が あれ ば 、 


キャ ッシュ を 利用 し て ペー ジ 内 容 が 表示 され ます 。 
| location.reload () 」 メ ノッ ド が うま くい か な い 場 合 は 、 次 の よう に 、 URL に 現在 の 時 間 
を URL パラ メー タ と し て 指定 する 方 法 も あり ます 。 


locatton.href = "http://www.OpenSPC2 . org/1ndex .html?t="+Cnew Date()).getTtme(): 





関連 項目 ょ ゅ [ 


リサ だ 半 P 欄 きた 欄 有 に 和 組 欄 物 得 ER p.859 


LIE6 1 Chrome 1 Safari 5 」 Firefox 4 1 Opera 11 ! iOS4 ! Android2 1WP」 


も IN-] は 


ペー ジ の URL を 取得 ・ 設 定 する 





ここ で は 、 ペー ジ の URL を 取得 ・ 設 定 す る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<t1tle>Sqmp le</t1tle> 
<SCPtDt src="]S/Sqmple .]S"></SCrtDt> 
</head> 
<body> 
<form> 
<tnput type="button" vglue="URL を 表示 "> 
<tnput type="button" vaqtue=" 指 定 URL に 移動 "> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . addEventListener("1oqd" 。 functton(){ 





Ka ココ コマ ロロ 


/ 
る 


var ele = document.getElementsByTagName( "1nput"): 

// 最初 の ボタ ン に イベ ント を 割り 当て 

ele[ の 9] .oddEventLtstener("cltck"。 functton(){ 
// 現在 の ペー ジ URL を 取得 
var url = locgatton.href 
alert(url): 

}, false): 

// 2 番目 の ボタ ン に イベ ント を 割り 当て 

ele[1] .qddEventListener("cltck"。functton(){ 
locatton .href = "httDp://www. て -『.COmW/": 

+, false): 

+。 fatse): 


テア yNYHN 
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き 呈 ビビ ピロ T| 口 NN -1 ヨ コロ m ペー ジ の URL を 取得 ・ 設 定 する 


ブラ ウザ で index.html を 表示 し 、| URL を 表示 」 ボ タン を クリ ッ ク す る と 、 現在 の ペー ジ の 
URL が 表示 され ます 。 





人 http://www.openSpC2.orq/0001/sample/ 









| 指定 URL に 移動 」 ボ タン を クリ ッ ク す る と 、 指定 し た URL し の ペー ジ に 移動 し ます 。 


を 


良書 の 出版 を 通じ て 人 が 者 らし や すい 社会 作り に 商 藤 し ます 。 


CsR 研 究 所 We contribute to rich society hrough publication of good books. 


読者 の 広場 書店 様 向け 


テ NYHNAJS よ すい に き 軸 4 ミト ma 


へ 委 々 /」 // 
テ 
ロジ ッ ク ボ ー ド や フレ ー ム 、 カメ ラ 、 各種 セン サー な ど 
0 





w* グラ フィ ッ ク ソ フト 
w サイ エン ス 

『 目 己 砂 発 

を マネ ー・ 投 次 

> 会 計 ・ 活 短 
全音 ・ 人 2 PHP 





次 格式 虐 ・ 転 職 
w マー ケ ク デ ィング 
ーー 短 で FC ペー 
> 素材 集 ・ ぬ り 総 ・ ア ー ト | /: 必携 書 / 介 
- オー ディ オブ ッ ク | 用 携 書 が 


w DVD 
。 晶子 書 氏 クラ ウド が あな た の Androtd ADK で 学ぶ PHP 逆 絢 き ハ ンド ブ finside of iPhone - 改訂 2 上 Objective- 
仕事 を 即効 率 化す る ハー ドウ ェ ア 制 御 ッ ク 3DCG で よく わか る |!  C 逆 引き ハン ドブ ッ 
オリ ジ ナ ル ロ ゴ Toodiedo「 趣 」 タ 3.570 円 (税込) 3.360 円 (税込 ) iPhone の 中 身 と その ク 

1.575S 円 {税込 ) 1.890 円 (税込 ) 


=i ョ ml 下 URL の 取得 と 移動 を 行う に は 「href] プロ パテ ィ を 使う 


現在 の URL(URI) を 取得 する に は 、「location 」 オブジェ クト の 「 href | プロ パテ ィ を 参 
昭 し ます 。 ペー ジ を 移動 し た い 場 合 に は 、| href 」 プロ パテ ィ に 移動 先 の URL(URI) を 指 
和 E し ます 。 









う 08 


LIE6 」 Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS4 」 Android 2 1WP」 


BE 上 ED じ TIHN-1 コ 1 


[Image」 オ ブ ジ ェクト を 生成 する 





ここ で は 、| Image」 オ ブ ジ ェクト を 生成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sqmp le</t1tle> 
<SCrtDt Src="]S/Ssample.]S"></SCrtDt> 
</head> 
<body> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. addEventLtstener( "Logd" 。 functton(){ 





var ele = document.getElementsByTagName( "output") う [9] : 
// 画像 オプ ジェ クト を 生成 
var myImage = new Image(89, 69): 
// 画像 の URL を 設定 する 
myImage .Src = "1mages/photo1 . ]pg": 
// 結果 を 出力 
ele.qppendCht ld(myTmage): 
+。 false): 


テ NYHNAJSL は MIN EE に EE に 4 


ブラ ウザ で index.html を 表示 する と 、| Image」 オ ブ ジ ェクト で 生成 され た 画像 が 表示 され 
ます 。 
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司 王 ピロ 丁 [ 口 届 -1 ヨ 1 W「Image」 オ ブ ジ ェクト を 生成 する 


m 当 = 中 mage」 オ ブ ジ ェクト を 生成 する に は 「new Image()」 と する 


画像 (| Image」 オブジェ クト ) を 生成 する に は 、「new Image () 」 と し ます 。 パラ メー タ 
に は 、 生 成す る 画像 の 横幅 と 縦 幅 を 指定 し ます (単位 は ビク セル ) 。 省略 し た 場合 は 、 オ 
リ ジ ナ ル の 画像 の 幅 が 適用 され ます 。 画像 の 幅 や 高 さ は 、 生 成 さ れ た 「Image」 オ ブ ジ ェ 
クト の 「width] プ ロ パ ティ や 「height」 プ ロ パ ティ を 使っ て 後 か ら 設定 する こと も で きま す 。 

また 、 表示 する 画像 は 「src」 プ ロ パ ティ に URL(URI) を 代入 し ます 。 注意 点 と し て は 、 
画像 は 非同期 で 読み 込ま れる の で 、 Canvas な ど で 描 画す る 場合 に は 、「Image」 オ ブ 
ジェ クト の 「onload」 プロパ ティ に イベ ント ハン ドラ を 設定 し 、 イベ ント ハン ドラ 内 で 画像 を 描 
画す る よう に し ます 。 

な お 、|new Image() 」 と し て 画像 を 生成 する 以外 に 、| documentcreateElement 
("img ) 」 と し て 生成 する 方 法 も あり ます 。 この 場合 で も 、「 Image」 オブジェ クト (「img」 
要素 ) が 生成 され ます (366 ペ ー ジ 参照 ) 。 













関連 項目 ょ ゅ 


e 画像 デー タ が 読み 込ま れ た 場合 に 処理 する …… つ 必 に ②K{ ジ オビ つ ー ビ ーー p.315 
の 凍 欄 ザー タダ な 入 れ 疾 え る に の ROLEMNO RA mmm D.317 
ぁ カ メラ で 撮影 し た 画像 を 表示 する の いぬ (ババ ーー ドロ ドド ドド 0 いい D.673 
e 画像 を フル スク リー ン 表 示 に する ……… ぐ (ドド em 4 な 2039. 7 620440Ccuod p.799 
ゅ 催 や 映像 ファ イル を 謎 あめ 込 絆 の の の ロ バド ドド トピ ーー さい 2 いい 24 い ca p.687 


LIE6 Chrome 1 Safari 5 』 Firefox 4 1 Opera11 ! iOS4 ! Android2 』IWP_ 





=1 コ salmlNa に シレ 
画像 の 幅 を 設定 ・ 取 得する 


ここ で は 、 画像 の 幅 を 設定 ・ 取 得する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sampte</t1tle> 
<SCcrtDt src="]S/sample .]S "></SCr1Dt> 
</hegd> 
<body> 
<d1V> 
<1mg SFPc="1mages/photo1 . ]pg" wtdth="89" hetght="69"> 
</d1V> 
<for> 
<tnput type="button" vatue=" 画 像 の 幅 を 取得 "> 
<tnput type="button" vatue=" 画 像 の 幅 を 変更 "> 
</form> 


<OUtDUt></OUtDut> 





</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . qaddEventLtstener("togd" 。 functton()1{ 


ブナ NHNAJSL よ JI に きま 導 E に 4 ミド 


var btn = document .getELementsByTagName( "1nput"): 
// img 要 素 を 読み 出す 
var myTmage = document.getEtementsByTagName("1mg")[9] : 
// ボタ ン に イベ ント を 設定 する 
btn[9] .oddEventLtstener("cLtck" functton(){ 
var ele = document.getElementsByTagName( "output")[9] : 
// 表示 され て いる 画像 の 横幅 を 読み 出す 
Var' W = myImage.wtdth: 
// 表示 され て いる 画像 の 縦 幅 を 読み 出す 
var h = myImage .hetght: 
// 結果 を 出力 
ele.innerHTML = "横幅 :"+w+"<br> 縦 幅 : "+h: 
},。 faqlse): 
// ボタ ン に イベ ント を 設定 する 
btn[1] .gddEventLtstener("cLtck"。 functton(){ 
// 表示 され て いる 画像 の 横幅 を 329px に する 
myImage .W1dth = 320: 


31 1 





テ NYHWAJSH よ JIN EE に EE に 4SFe 
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還 選 ビ ロ ピロ T| 口 届 -1 コ 2 mW 画像 の 幅 を 設定 ・ 取 得する 


// 表示 され て いる 画像 の 縦 幅 を 249px に する に 4 
mylmage .hetght = 249: 
+, false): 
}, false): 


プラ ウザ で index.html を 表示 し 、「 画 像 の 幅 を 取得 」 ボ タン を クリ ッ ク す る と 、 画像 の 横幅 と 
紅 路 が 表示 され ます 。 





画像 の サイ ズ を 取得 ・ 設 定 す る に は 
品 m 剛 [Width」 プロ パテ ィ と 「height」 プロ バテ ィ を 使う 


| Image」 オブジェ クト 、 また は 、 ペー ジ 上 に 表示 され て いる 「img」 要素 の サイ ズ は 、 
| width] プロ パテ ィ と | height」 プロ パテ ィ で 取得 と 設定 が で きま す 。「width」 プロ パ 
テイ は 横幅 、| height」 プロパ ティ は 縦 幅 と な り 、| width」 プロパ ティ と 「height 」 プロ パテ ィ 
で 取得 ・ 設 定 す る 値 の 単位 は ビク セル に な り ま す 。「 width]」 プ ロ パ ティ 、「height」 プ ロ 
パテ ィ だ け で な く 、 CSS の | width」 プロパ ティ 、「height」 プロ パテ ィ を 使っ て 設定 する こと 
も で きま す 。 その 場合 は 、| 320pt 」 の よう に 単位 付き で 設定 する 必要 が あり ます 。 

また 、 画像 の サイ ズ は 表示 され て いる サイ ズ に な り 、 画像 の 元々 の サイ ズ を 取得 する 
に は 313 ペ ー ジ で 説明 し て いる |naturalWidth 」 プロ パテ ィ や 「naturalHeight | プロ パ 
ティ を 利用 し ます 。 











関連 項目 ょ ゅ 


e 男 像 の オリ ジ ナ ル の 幅 を 取得 する … や … ひ …………… ド ドド ドド ドド ドド ーー D.313 


LIE9 1 Chrome ! Safari 5 | Firefox 4 1 Opera11 OS4 | Android2 WP 


ら E ビ DTIHN-1 ゴ コ 


画像 の オリ ジ ナ ル の 幅 を 取得 する 








ここ で は 、 画像 の オリ ジ ナ ル の 幅 を 取得 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttte>Sgmple</t1tle> 
<SCrtpt src="]Ss/sample .]S "></SCr1Dt> 
</head> 
<body> 
<d1V> 
<tmg src="1mages/photo1 .]pg" wtdth="89" hetght="69"> 
</d1V> 
<forrm> 
<input type="button" value=" 画 像 の 元 の 幅 を 取得 "> 
<tnput type="button" value=" 画 像 を 元 の 幅 に 変更 "> 


</ 和 fori> 





<OU て Dut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow.addEventLtstener("toagd" 。 functton(){ 


に Ku ココ ヨコ マロ ロ 


が 
る 


テ NYHN 


var btn = document .getEtementsByTagName( "1nput" ): 
// img 要 素 を 読み 出す 
var myTmage = documernt.getEtementsByTagName("1mg")[9]: 
// ボタ ン に イベ ント を 設定 する 
btn[9] .qddEventLtstener("clLtck"。 functton()+ 
var ele = document.getEtementsByTagName( "output")[9] : 
// 表示 され て いる 画像 の 元 の 横幅 を 読み 出す 
var W = myImage .naturalW1tdth: 
// 表示 され て いる 画像 の 元 の 縦 幅 を 読み 出す 
var h = myImage .naturalHetght: 
// 結果 を 出力 
ele.innerHTML = " 元 の 横幅 :"+w+"<br> 元 の 縦 幅 :"+h: 
}, false): 
// ボタ ン に イベ ント を 設定 する 
btn[1] .gddEventLtstener("clLtck", functton()+ 
// 表示 され て いる 画像 の 横幅 を 元 の 幅 に する 
myTmage .wtdth = myImage.naturalWidth: 


313 


還 ビ ビビ TI ロロ N-13 コ mW 画像 の オリ ジ ナ ル の 幅 を 取得 する 


// 表示 され て いる 画像 の 縦 幅 を 元 の 幅 に する 4 
myTmage .hetght = myTmage.naturalHetght: 
}, fgqlse): 
}, faqlse): 


ブラ ウザ で index.html を 表示 し 、| 画像 の 元 の 幅 を 取得 」 ボ タン を クリ ッ ク す る と 、 画像 の 元 
の 横幅 と 縦 幅 が 表示 され ます 。 


元 の 縦 幅 : 240 





| 画像 を 元 の 幅 に 変更 ] ボ タン を クリ ッ ク す る と 、 元 の 画像 の サイ ズ に 変わ り ま す 。 


テ ナ テ NH はり JI い | に だ に 28 








中 更 了 の の サイ ズ を 取得 する に は 
「naturalWidth] プロ パテ ィ と 「naturalHeight」 プロ パテ ィ を 使う 


| Image」 オ プ ジ ェ クト の 「width」 プ ロ パ ティ と 「height」 プロ パテ ィ は 、 現在 、 表示 され て 
いる 画像 の サイ ズ を 示し て いま す 。 表示 され て いる 画像 サイ ズ で は な く 、 元々 の 画像 サイ ズ 
を 取得 する に は 、| Image」 オ プ ジ ェ クト の 「naturalWidth」 プロ パテ ィ と 「naturalHeight」 
ブ プロパティ を 参照 し ます 。「naturalWidth] プロ パテ ィ が 横幅 、「naturalHeight | プロ パ 
ティ が 縦 幅 で 、 読み 出さ れ た 数 値 の 単位 は ビク セル に な り ま す 。 


内 放 当 に 三 還 用 2 
人 ま 朋 人 の 自 を 設定 ・ 取 欄 ず 0 と 02 p.31 1 
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|IE6 Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iQOS4 | Android2 』WP_ 


=1 ゴ eiMlmIN に と ! 
画像 デー タ が 読み 込ま れ た 場合 に 処理 する 


ここ で は 、 画像 デー タ が 読み 込ま れ た 場合 に 処理 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttle>SampLe</t1tle> 
<Scrtpt src="]S/sample .]S"></SCrtDt> 

</head> 

<body> 
<canvas wtdth="329" hetght="249"> 

Canvas 対 応 ブ ラウ ザ を 利用 し て くだ さい 

</CanVQS> 

</body> 

</html> 


JavaScript の コー ド (sample.jS) 
wtndow.qddEventLtstener("1ogd"。 functton(){ 
// canvas 要 素 を 読み 出す 
vagr canvasOb] = document.getElementsByTagName("caqnvas")[9] : 
// コン テキ スト を 読み 出す 
var context = canvasOb] .getContext("2d"): 
// 画像 を 読み 込む 


var myImage = new Image(): 





テ ナ NTHVAJS 二 JI に に に 4 ミ 


mylmage.Src = "tmages/photo9.]pg': 
// 画像 の 読み 込み 完了 時 に 呼び 出す イベ ント ハン ドラ を 設定 
mylmage .ontoad = functton(){ 
context . drawImage(thts , 29,10): 
} 
}, false): 


ブラ ウザ で index.html を 表示 する と 、 画像 デー タ が 読み 込ま れ た 後 、Canvas に 画像 が 捕 
画 さ れ ま す 。 
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還 ご E ビ TI ロロ N-1 コ 3 m 画像 デー タ が 読み 込ま れ た 場合 に 処理 する 


= ヨコ =I 下 画像 の 読み 込み 完了 の チェ ッ ク を 行う に は 「onload」 プロ パテ ィ を 使う 


| Image」 オプ ジ ェクト で は 、 画像 が 読み 込ま れる と 、「]load 」 イベ ント が 発生 し ます 。 
| Image」 オ ブ プ ジ ェ クト に は 「onload」 プロ パテ ィ が あり 、 イベ ント ハン ドラ を 設定 し て お < く こ 
と で 、 画像 読み 込み 完了 時 に 処理 する こと が で きま す 。 

Canvas に 画像 を 描画 する 場合 は 、 画像 デー タ が 読み 込ま れ て いる 必要 が あり ます 。 
サン プル で は 、 画 像 の 読み 込み 完了 時 に 、Canvas に 画像 を 指定 位置 に 描画 し て いま す 。 







関連 項目 ょ ゅ 


@ 中 mage」 オブ ジェ クト を 生成 する 芝生 人 凍 4: 夫 軍人 李 飼い D.309 
画像 デー タ を 入れ 替え る 和議 呈 打 6 芝居 送り 導き D.3 「 才 /。 
1 画像 や 映像 ファ イル を 読み 込む 本人 I00 人 生か 0 帝 人 介 0 枯 9 22 D.68 ア 7 


LIE6 ! Chrome 」 Safari 5 | Firefox 4 1 Opera 11 1 iOS4 』 Android2 1WP_ 


ELTNIe 1 9 


画像 テー タ を 入れ 替え る 





ここ で は 、 画像 デー タ を 入れ 准 え る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sample</t1tle> 
<SCrtDt src="]S/sample .]S "></SCr1Dt> 
</head> 
<body> 
<d1V> 
<tmd SrC="1mages/photo_gray の . ]pg "> 
</d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . qaddEventLtstener("toad" 。 functton()+ 
// img 要 素 に アク セス する た め に 参照 を 変数 に 代入 
var myTmage = document.getEtementsByTagName("1mg")[9] : 
// mouseover イ ベン ト を 割り 当て る 
my1lmage .addEventLitstener( "mouseover" functton()+ 
thts.src = "1mages/photo9. ]pg": 
+。 fatse): 
// mouseou モ イベ ント を 割り 当て る 
mylmage .oddEventLtstener( "mouseout"。 functton()+ 
thts.src = "tmages/photo_gray の 9.]pg': 
}, fatse): 
+, false): 


ブラ ウザ で index.html を 表示 し 、 画像 上 に マウ ス を 乗せ る と 、 画像 が 入れ 替わり ます 。 
Android の 場合 は 、 タッ チ す る と 画像 が 入れ 替わり ます 。 








テ NYHN^ANJISH り JI に に まこ に 4 ミド | 
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mW 王 ロ 丁 | 口 N -1 ヨ 55 m 画像 デー タ を 入れ 替え る 


マウ ス を 画像 か ら 離 す と 、 元 の 画像 に 戻り ます 。 





= 紀 ョ li 下 画像 の 入れ 替え を 行う に は 「src] プロ バテ ィ を 使う 


画像 を 入れ 替え る に は 、|Image」 オプ ジェ クト の 「src 」 プロ パテ ィ に 画像 の URL 
(URI) を 指定 し ます 。 その 際 、 入れ 替え る 画像 デー タ が 読み 込ま れ て いな いと 、 瞬時 
に 切り 共 わ り ま せん 。 低速 な 回 線 の 場合 は 、 次 の よう に あら か じ め 、 画像 を 読み 込ん で お 
く 方 法 も あり ます 。 









Cnew Image()).src = "画像 の URL": 






な お 、 ロー ルオ ー バ ー に よる 単純 な 画像 の 入れ 替え で あれ ば 、 TavaScript を 利用 する 
より も CSS を 使っ て 人 れ 替 える 方 が よい 場合 も あり ます (下記 の COLUMN 参 照 )。 


mami 紀 引 に 上 識 らら で ロー ルオ ー バ ー を 行う に は 


CSS で ロー ルオ ー バ ー を 行う に は 、| :hover」 疑似 クラ ス を 利用 し ます 。 次 の 場合 、 
HTML で [| <div id=myImage ></div>」 と な っ て いる 背景 画像 を 入れ 替え ます (317 
ペー ジ の サン プル と 同様 の 処理 )。 

また 、 複 数 画像 の 入れ 替え で は な く 、1 枚 の 画像 を 入れ 替え る (CSS ス プラ 人 イト ) 場合 は 、 
| background-position」 を 使っ て 表示 する 画像 の 位置 を 変化 させ る こと で ロー ルオ ー 
バー を 実現 する こと が で きま す 。 














myImage { 
wtdth: 169px: 
hetght: 129Dx: 
background-tmage: url(tmages/photo_gray9. ]pg): 







} 
myImage:hover { 











background-1tmage: urtC1mages/photo9. ]pg): 
} 






[IE の 2 エド 直 半 科 Atur020 い yr p.309 
e 画像 デー タ が 読み 込ま れ た 場合 に 処理 する 上 …… パ ぬ Q 上 … バ (ひび (i… ド ーーー ドーーーーーー…… p.315 
牧 肖 半生 サン 2 間 D.687 


LIE6 』 Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS4 』 Android 2 !WP_ 





=1 コ maglmlN に 1= 
フォ ー ム 要素 に アク セス する 


ここ で は 、 フォ ー ム 要素 に アク セス する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<tttle>SampLe</t1tLe> 
<SCrtpt src="]S/sample .]S "></SCrtDt> 
</head> 
<body> 
<form method= "post"> 


<1nput tyDpe="text"><Dr> 





<tnput type="radio" name="os">10S<br> まい 

<tnput type="radto" name="os">Androtd<br> に 

<tnput type="checkbox" name="myCheck" checke> 確 認 済み <br> a ] 

<textarea rows="3" cols="29"> ご 意見 </textareg><br> ブ 
<input type="button" value=" 確 認 ボ タン " id="chkBtn"> ラ 
</form> サ 
<output></output> と 
</body> ジ 
</html> ク 
ト 


JavaScript の コー ド (sample.js) 


window .qddEventListener("lLoad" ,。 functton()1{ 
var ele = document .getEtementsByTagName( "output")[9] : 
// フォ ー ム の input ボ タン に getElementByIdC) で アク セス 
var btn = document.getEtementById( "chkBtn" ): 
// ボタ ン に イベ ント を 割り 当て 
btn .qddEventLtstener("cLtck" 。 functton(evt){ 
// 最初 の フォ ー ム 有 要素 
var f = document.forms[9] : 
// フォ ー ム の wmethog 属 性 に アク セス 
ele.tnnerHTML = f.method +"<br>": 
// etements で 最初 の 要素 に アク セス 
f.elements[9] .value = "JavaScrtpt": 
// 2 番目 の ラジ オ ボ タ ン を 選択 
f.elements[ "os"][1] .checked = true: 
// チェ ッ ク ボ ックス の 選択 状態 を 切り 替え 
f.myCheck .checked = !f.myCheck.checked: 
// テキ スト エリ ア に 文字 を 出力 
document.querySetectorALLC"textarea")[9] .vatue = "ノー コメ ント ": 
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生 王 己 ピロ 丁 | 口 N -1 ヨ 6 mw フォ ー ム 要素 に アク セス する 


+, fatse): 4 


}, faqlse): 
ブラ ウザ で index.html を 表示 し 、| 確認 ボタ ン 」 を クリ ッ ク す る と 、 フォ ー ム の 「method | プロ 


パテ ィ の 値 が 表示 され 、 ラジ オ ボ タ ン や チェ ッ ク ボ ックス の 状態 が 変化 し ます 。 また 、 テキ スト 
フィ ー ル ド や テキ スト エリ ア 内 に 文字 が 出力 され ます 。 


| @ Androd 
確認 済み 
ご 意見 





mi ココ =I に 下 フォ オー ム を 市 件 す る に は 要素 に アク セス する 


フォ ー ム 、 お よび 、 フォ ー ム 有 要素 に アク セス する 方 法 は 多様 で す 。 次 の よう な 方 法 で 各 
要素 に アク セス する こと が で きま す 。 








| fOrm」 要素 






document.forms[ 番 号 ] 
document. フ ォ ー ム 名 








form 内 の 癌 要素 
document .forms[ 番 号 ] .etements[ 番 号 ] 

documernt . forms[ 番 号 ] .etements[ 番 号 ][ 番 号 ] // ラジ オ ボ タ ン の 場合 

document.forms[ 番 号 ][ 番 号 ] 







@ | fOrm」 要素 と 各 要 素 共通 
// 田 は HTML の 要素 

一 .getELementById(TD 名 ) 

田 .getElementsByTagName( 要 素 名 ) 

較 .getElementsByName( 名 前 ) 

田 .9etElementsByClLassName( 要素 名 ) 

田 .querySetlector( セ レク タ ) 

圏 .guerySelectorAl1( セ レク タタ ) 











LIE6 Chrome 』 Safari 5 | Firefox 4 ! Opera 11 」 OS4 1 Android 2 ! WP 」 


EE TIEUN-1 つ / 


ラジ オ ボ タ ン / チ ェ ッ クボ ックス の 状態 を 
三 ク 
設定 ・ 取 得する 
ここ で は 、 ラジ オ ボ タ ン / チ ェ ッ クボ ックス の 状態 を 設定 ・ 取 得する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<title>Saqmplte</t1tle> 
<SCrtDt src="]S/Sample .]S"></SCrtDt> 
</head> 
<body> 
<form name="selectFoods"> 
<fteldset> 
<legeng> 主 食 を 選択 </Llegend> 
<p><labet><input type="radio" name="f1"> 和 白米 </Lgbel></p> 
<p><lobel><input type="radto" name="f1"> 五 穀 米 </Lgbel></p> 





<p><lLagbet><input type="radto" name="f1"> パ ン </1obel></p> 
</fteldset> 
<fteldset> 
<tegend> お か ず を 選択 </legend> 

<p><label><input type="checkbox"> コ ロッ ケ </1gqbelt></p> 


NISAL て NMIN EEE に 4 ミ は 


プ 
る 


<p><tabet><tnput type="checkbox "> 味噌 汁 </Lgbet></p> 
<p><label><input type="checkbox"> 漬 け 物 </1gbel></p> 
</fteldset> 
<tnput type="button" vatue=" 選 択 状態 を 表示 " 1d="chk"> 


</form> 


テ NYHN 


<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .addEventLtstener("1oad" functton(){ 

var btn = document.getElementBy1Id("chk"): 

// ボタ ン に イベ ント を 割り 当て 

btn .qddEventLtstener("cLtck"。 functton(evt)†{ 
var ele = document.getEtementsByTagName( "output")[9]: 
// ラジ オ ボ タ ン の 選択 状況 を 読み 出し 
var radioBtn = document.forms["setlectFoods"]["f1"]: 
// チェ ッ ク ボ ックス の 選択 状態 を 読み 出し 
var checkBtn = document.querySeltectorAl1("1nput[type=checkbox]"): 
// 読み 出し た 結果 を 出力 
ete.tnnerHTML = " 圏 ラ ジオ ボタ ン <br>" 
forCvar 1= の : it<radtoBtn.Length: ユ ++){ K4 
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mm 戸 ビビ TI ロト NI-1 コ プ mW ラジ オ ボ タ ン / チ ェ ッ クボ ックス の 状態 を 設定 ・ 取 得する 


ele.1nnerHTML += "radtoBtn"+1+":"+raditoBtn[i] . checked+ "<br>": 4 


} 
ele.tnnerHTML += " 圏 チ ェ ッ クボ ックス <br>": 
for(var 1=9: 1<checkBtn.Length: 1++){ 


ele.1nnerHTML += "radtoBtn"+1+":"+checkBtn[1] .checked+ "<br>": 


} 
// デフ ォ ル トイ ベン ト を 禁止 


evt .preventDefault(): 
return false: 
+, faqlse): 
}, false): 


ブラ ウザ で index.html を 表示 し 、| 選択 状態 を 表示 」 ボ タン を クリ ッ ク す る と 、 ラジ オ ボ タ ン と 
チェ ッ ク ボ ックス の 選択 状態 が 表示 され ます 。 


主食 を 選択 
@ 日 米 
@ 万 穀 米 


@ バン 





お か ず を 選択 
圏 コロ ッ ケ 


団 味噌汁 
則 漬け 物 


人 


radioBtn0: falsc 
radioBtn1 : true 
radioBtn2: false 
画 チ ェ ッ クボ ックス 
radioBtn0: true 


テ NYHNAJSH よ JIN EE に ES4 ミ Fm 





ラジ オ ボ タ ン と チェ ッ ク ボ ックス の 選択 状態 を 調べ る に は 
Gt 「checked」 プロ パテ ィ を 使う 


ラジ オ ボ タ ン と チェ ッ ク ボ ックス の 選択 状態 を 調べ る に は 、 要素 の 「checked」 プ ロバ 
ィ を 参照 し ます 。 選択 され て いる 場合 は | true」、 選択 され て いな い 場 合 は 「false | に 


の 
な り ま す 。 | checked」 プ ロ パ ティ は 読み 出し だ け で な く 、 設定 する こと も で きま す 。 

また 、 フォ ー ム 要素 で チェ ッ ク さ れ て いる ラジ オ ボ タ ン / チ ェ ッ クボ ックス だ け を 取得 し た 
い 場 合 は 、| documentquerySelectorAll( inputchecked") | の よう に セレ クタ を 利用 





する 方 法 も あり ます 。 
関連 項目 ょ ゅ 
フォ ー ム 要素 に アク セス する 和裁 6 和光 60IA あせ 45 ケ の の が の 央 か 616: 8. 光 科 が D.31 ロ 


う 22 


Android 2 





=1 ゴ aiglmlNaFE1= 
フォ ー ム 要素 の フォ ー カ ス を 設定 する 


ここ で は 、 フォ ー ム 要素 に フォ ー カ ス し た り 、 内 容 を 選択 し た りす る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sqmple</t1tle> 
<SCrtDt src="]S/sample .]S "></SCr1Dt> 
</head> 
<body> 
<form> 
<p><labet> 名 前 : 
<tnput type="text" 1d="uName" value="KF" placehotder=" 名 前 を 入れ て くだ さい "> 
</tabel></D> 
<p><labet> 予 約 日 : 
<1nDut tyDe="date"> 





</Label></D> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow.qddEventLtstener("toad" 。 functton(){ 


テ NYHWNANIH よ MIN に に だま に 4 


var ele = document.getEtementById("uName"): 
// 最初 の テキ スト フィ ー ル ド に フォ ー カ ス 
ele.focus( ): 
// 入力 され て いる 文字 を 選択 
ele.select( ): 

+。foalse): 


ブラ ウザ で index.html を 表示 し 、 ペー ジ が 読み 込ま れる と 同時 に 最初 の テキ スト フィ ー ル ド 
に フォ ー カ ス が 移り ます 。 さら に 、 テキ スト フィ ー ル ド 内 の 文字 が 選択 状態 に な り ま す 。 


名 前 : 較 


予約 日 : 
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mW ビ ピロ T 口 N-1 ヨ 日 mw フォ ー ム 要素 の フォ ー カ ス を 設定 する 


フォ ー カ ス を 設定 する に は 「focus()」 メソッド や 「blur() 」 メソッド 、 
mM 「select()」 メ ソ ッ ド を 使う 


入力 フォ ー ム に は さま ざま な エレ メン ト が あり ます 。 ペー ジ が 読み 込ま れ た 際 や 入力 エ 
ー で 、 エラ ー 発 生 場 所 の エレ メン ト に フォ ー カ ス し た い 場 合 が あり ます 。 特定 の エレ メ 


ント に フォ ー カ ス す る に は 、| focus() 」 メ ソ ッ ド を 使い ます 。 フォ ー カ ス を 外し た い 場 合 に は 、 
| blur() 」 メ ソ ッ ド を 使い ます 。 な お 、 テキ スト フィ ー ル ド の 場合 、「 focus() 」 メ ソ ッ ド 実行 後 
に 「select() 」 メ ソノ ッ ド を 実行 する と 、 入力 済 み の 文 字 を 選択 状態 に する こと が で きま す 。 


関連 項目 ゅ 
の フォ ー ム 要素 に アク セス する 本! 和光 70 人 信和 0 人 の 滞 は 和 R わ ye sa D.3 19 
ま フォ ー カ ス し た 際 に 処理 を 行う 生け すす ヤツ ササ リヤ ヤー すく か ジリ チイ (0 p.4 す の 





〔] 
上 
リン 
提 偽 
ー 
円 
= 尋 





NTHNANUS 士 | 
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LIE6 ! Chrome 1 Safari 5 | Firefox 4 1 Opera 11 1 iOS4 」 Android 2 !WP_ 


9 に 1 LTN- ココ 


フォ ー ム 内 容 を 読み 出す 





ここ で は 、 フォ ー ム 内 容 を 読み 出す 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sqgmple</t1tle> 
<SCP1pt src="]S/sqmple.]S "></SCP1Dt> 
</head> 
<body> 
<form> 
<p><lobel> 名 前 : 
<input type="text" 1d="uName" vatue="KF" placehotder=" 名 前 を 入れ て くだ さい "> 
</1aqbel></Dp> 
<p><lobel> 予 約 日 : 
<tnput type="date"1d="reservedDay"> 
</1gbel></p> 
<button> 内 容 を 読み 出し て 表示 </button> 
</formm> 
< く OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


witndow .qddEventListener("1Load" 。functton()1+ 





ブ NYHN^AJSNL よ MIN EE だ IE に 28 


var btn = document.getEtementsByTagName( "button")[9] : 

// ボタ ン に イベ ント を 割り 当て 

btn .addEventListener("clLtck" 。functton(evt){ 
var ele = document .getEtLementsByTagName( "output")[9] : 
// 名 前 を 入力 する テキ スト フィ ー ル ド の 値 を 読み 出す 
var uSserNagme = document.getElLementBy1Id("uName").vatue: 
// 予約 日 を 入力 する テキ スト フィ ー ル ド の 値 を 読み 出す 
var resDay = document.getElementById("reservedDay").vatue: 
// 読み 出し た 結果 を 出力 
ele.innerHTML = "名 前 :"+userName+"<br>": 
ele.tnnerHTML += "予約 日 :"+resDay: 
// デフ ォ ル トイ ベン ト を 禁止 
evt.preventDefault(): 

+, faqlse): 

+, fatse): 


325 


回 
N 





テ NYHNA へ JSL は JE に まき EK4 ミ ma 


326 


画 品 ビビ ロイ 丁 | 口 N -1 コ 紀 mw フォ ー ム 内 容 を 読み 出す 


ブラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド に 入力 し た 後 、「 内 容 を 読み 出し て 表 
示 」 ボ タン を クリ ッ ク す る と 、 入力 し た 内 容 が 画面 に 出力 され ます 。 


AB ーーーーー 


ロロ NE ビ PINT 


テキ スト フィ ー ル ド に 和信 力 され た 内 容 を 読み 出す に は 、 要素 の 「value」 プロ パテ ィ に ア 
クセ ス し ます 。 テキ スト フィ ー ル ド に 数 値 を 入れ た 場合 で も 「valune」 プロ パテ ィ で 読み 出す 
と 、 数 値 型 で は な く 文 字 型 と し て 返さ れ ます 。 数 値 型 と し て 読み 出す 場合 に は 、[valueAs 
Number」 プ ロ パ ティ を 参照 し ます 。 た だ し 、「valueAsNumber」 プロ パテ ィ で アク セス で 
さき る の は 、| input」 要素 の 「type」 属 性 に [number」 を 指定 し た 場合 に な り ま す 。 他 の 形 
式 を 指定 し た 場合 は 、| valueAsNumber」 プロパ ティ か ら 読 み 出 すこ と が で きま せん 。 


関連 項目 ゅ 
と 】 フォ ー ム 要素 に アク セス する 人 人 人 中 (0: 沈 束 本 二 党 人 を 湯本 が を 生 要 を きき が D.3 19 
『] 内 容 を Date 型 / 数 値 型 と し て 読み 出す で アスタ パサ 2 で や ン イン 生生 D.3 ら 7 








=1 コ malmlN 和 と Ma 
内 容 を Date 型 / 数 値 型 と し て 読み 出す 


ここ で は 、 内 容 を Date 型 / 数 値 刑 と し て 読み 出す 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>SampLe</t1tle> 
<SCP1pt Src="]S/Sample .]S"></SCr1Dt> 
</head> 
<body> 
<form> 
<p><lobel> 発 注 数 : 
<tnput type="number" 1d="oNumber" vatue="5"> 
</1abel></D> 
<p><label> 予 約 日 : 


<tnput type="date" 1d="reservedDay"> 





</1abel></P> 
<button> 内 容 を 読み 出し て 表示 </button> 
</form> 
< く OUtDu モ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window . qaddEventLtstener("1ogd" 。 functton(){ 


テ NHNAJS よ MIN に だ に 4 ミド 


var btn = document.getElementsByTagName( "button")[9] : 

// ボタ ン に イベ ント を 割り 当て 

btn.addEventLtstener( "clLtck"。functton(evt)+ 
var ele = document .getElementsByTagName( "output")[9] : 
// 数 値 テ キス ト フ ィ ー ル ド を vaqtue で 読み 出し + 記 号 で 処理 
var num1 = document.getELementById( "oNumber").value: 
num1 = num1 + /: 
// 数 値 テ キス ト フ ィ ー ル ド vqatueAsNumber で 読み 出 + 記 号 で 処理 
var num2 = document.getELementByTd( "oNumber").vatueAsNumber: 
num2 = num2 + /: 
// 日 付 テ キス ト フ ィ ー ル ド の 値 を vatue で 読み 出す 
var resDay1 = document.getElementByTd("reservedDay") .vatLue: 
// 日 付 テ キキ スト フィ ー ル ド の 値 を vatueAsDate で 読み 出す 
var resDay2 = document.getElementById("reservedDay").vatueAsDate: 
// 読み 出し た 結果 を 出力 
ete.innerHTML = " 較 個 数 に 7 を 加算 し た 結果 <br>" 


27 





テ NYHWANISH よ MIN EE たま EK に 4 ミ Sm 


う 28 


昌 王 ビ ピロ T| 口 届 - 1 オロ mW 内 容 を Date 型 / 数 値 型 と し て 読み 出す 


ele.1tnnerHTML += "num1:"+num1+"<br>"・ 4 
ele.1nnerHTML += "num2:"+num2+ "<br>"・ 
ele.innerHTML += " 較 日 付 の 読み 出し <br>": 
ele.1nnerHTML += "resDay1:"+resDay1+ "<br>": 
ele.tnnerHTML += "resDay2:"+resDay2: 
// デフ ォ ル トイ ベン ト を 禁止 
evt.preventDefault( ): 
Peturn false: 
+。fgqlse): 
+, fatse): 


ブラ ウザ で index.html を 表示 し 、 フィ ー ル ド に 入力 し た 後 、| 内 容 を 読み 出し て 表示 」 ボ タン を 
クリ ッ ク す る と 、 人 入力 し た 数 値 に | 7] を 加算 し た 結果 と 、 設定 し た 日 付 が 画面 に 出力 され ます 。 


発注 数 : ーー _ 3 結 
予約 日 : ・ 2012.04-01 。 





26 27 28 29 30 31 


9 10 1】1 12 13 14 15 
16 17 18 19 20 21 22 
23 24 25 26 27 28 29 


iesDay1 : 201204.01 
iesDay2 : Sun Apr 01 2012 09:0000 GMT+10900 





日 付 型 と し て 読み 出す に は 「valueAsDate」] プロ パテ ィ を 使う 
HTML5 の 入力 フォ ー ム に は 、 数 値 専 用 人 力 と 日 付 専 用 入力 を 行う フィ ー ル ド が あり ま 
す 。 これ ら の フィ ー ル ド の 内 容 は 、 従来 通り 、「 value」 プロ パテ ィ を 使っ て 読み 出す こと が 
で きま す 。 た だ し 、| value」 プロパ ティ を 使っ て 読み 出し た 場合 、 内 容 が 数 値 で あっ て も 
文字 型 と し て 読み 出さ れ ま す 。 数 値 型 と し て 読み 出す 場合 に は 、「valueAsNumber」 プ 
ロ パ ティ を 使い ます 。 た だ し 、| type=number 」 以外 で は 、「valueAsNumber 」 プ ロ パ 
ティ は 止 し く 機能 し ませ ん 。 
| type= date 」| type= datetme 」 | type='datetme-local' | が 指定 され て いる 場合 、 
| valueAsDate」 プ ロ パ ティ を 使う と 、 日 付 を 示す 文字 列 と し て 読み 出す こと が で きま す 。 











関連 項目 ょ ゅ 


フォ オー ム 本 本 に アク グセ 衝 法人 Me Yeske 和 AMy42Y26M れ 03kAs p.319 


LIE6 1 Chrome Safari 5 1 Firefox 4 1 Opera11 1 iOS4 | Android2 IWP_ 


ビビ TI 品 N-1 人 41 
フォ ー ム へ の 入力 を 禁止 ・ 許 可 す る 


ここ で は 、 フォ ー ム へ の 入力 を 禁止 ・ 許 可 す る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 


<meta charset="utf-8"> 





<tttte>Sqmple</t1tle> 
<SCcrtpt src="]Ss/sample .]S "></SCr1Dt> 
</head> 
<body> 
<form> 
<p><tnput type="text" 1d="uNome" placeholder=" 名 前 を 入れ て くだ さい "></p> ロ 
<tnput type="button" value=" 入 力 を 禁止 " 1d="ditsBtn"> 
<tnput type="button" vatue=" 入 力 を 許可 "1d="engBtn"> 9 
</form> 円 = 
刀 ー 
</body> ブ 
</html> ラフ | 
ウ 
ザ 
YE 目 寺村 可 逢 JavaScript の コー ド (sample.jS) ろう 
wtndow. addEventListener("1oad" 。 functton( )1 ジ 
var myField = document.getEtementById(C"uName"): て 


var dBtn = document.getElLementById("dtsBtn"): 

var eBtn = document .getEtementById( "enaBtn"): 

// 入力 禁止 ボタ ン に イベ ント を 割り 当て 

dBtn .gddEventLtstener("cLtck"。 functton(evt)+ 
// フィ ー ル ド へ の 入力 を 禁止 
myFteld.dtsabled = true: 

+, faqlse): 

// 入力 許可 ボタ ン に イベ ント を 割り 当て 

eBtn.aqddEventListener("ctLtck",。 functiton(evt)+ 
// フィ ー ル ド へ の 入力 を 許可 
myField.dtsablted = faqlse: 

+。 faqlse): 

+, false): 
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還 己 ピ 本 口 N! - 1 4 ] ww フォ ー ム へ の 入力 を 禁止 ・ 許 可 す る 


ブラ ウザ で index.html を 表示 し 、| 入力 を 禁止 | ボタ ン を クリ ッ ク す る と 、 テキ スト フィ ー ル ド へ 、 
の 入力 が で き な く な り ま す 。 





| 入力 を 許可 」 ボ タン を クリ ッ ク す る と 、 テキ スト フィ ー ル ド へ の 入力 が 可能 に な り ま す 。 


HHNEP 品 INT 








テキ スト フィ ー ル ド へ の 入力 を 禁止 する に は 、「disabled 」 プ ロ パ ティ に 「true」 を 設定 し 
ます 。| false」 を 設定 する と 、 入力 が 可能 な 状態 に な り ま す 。「disabled 」 プロ パテ ィ は 
テキ スト フィ ー ル ド だ け で な く 、 ラジ オ ボ タ ン や チェ ッ ク ボッ クス 、 セレ クト メニ ュー に 対し て も 
有効 で す 。 

な お 、| form」 要素 に は |「disabled」 プ ロ パ ティ は な いた め 、 一 括 し て すべ て の 要素 の 
入力 を 禁止 する こと は で きま せん 。 








関連 項目 ょ ゅ 
@ フォ ー ム 要素 に アク セス する 07 06 和泊 人 人 当 当 沈 な まる wa まま る は 2 まる 生生 2 で 人 5 1 D.9 ] d 


LIE6 Chrome 】 Safari 5 | Firefox 4 1 Opera11 | iOS4 」 Android2 WP 」 


EE ビビ TIN-1 人 オジ 


セレ クト メニ ュー で 選択 され た 項目 を 取得 する 








ここ で は 、 セレ クト メニ ュー で 選択 され た 項目 を 取得 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttte>SampLe</t1tle> 
<SCrtpt src="]s/sample.]S"></SCrtDt> 
</head> 
<body> 
<forr> 


<select 1d="food"> 





<option vatue="ritce"> 和 白米 </option> エ 
<option vglue="pasta"> パ スタ </optton> 
<option value="drink"> 飲 料 </option> 四 
<optton value="beer"> ビ ー ル </option> ブ 
</select> ラ 
<tnput type="button" vatue=" 選 択 番 号 と 項目 を チェ ッ ク " id="chk"> サ 
</form> オ 
<OUtDut キ ></Out て Dut> の 
</body> み 
</html> ド 


JavaScript の コー ド (sample.jS) 


wtndow .qddEventLtstener("1ogd"。 functton()1{ 
var ele = document.getEtementsByTagName( "output")[9] : 
// セレ クト メニ ュー の 要素 を 読み 出し 
var mySetMenu = document.getEtLementById("food"): 
// ボタ ン 要 素 の 読み 出し 
var btn = document.getEtLementById("chk"): 
// ボタ ン に イベ ント を 割り 当て 
btn .qddEventLtstener("cLtck"。 function(evt){ 
// セレ クト メニ ュー の 選択 番号 を 取得 
var no = mySelMenu.selectedTndex: 
// セレ クト メニ ュー の 選択 項目 を 取得 
var ttem = mySelMenu.value: 
// セレ クト メニ ュー の 選択 項目 の 文字 を 取得 
var text = mySelMenu.opttons[no] .text: 
// 結果 を 出力 
ele.tnnerHTML = "選択 され た 番号 :"+no+"<br>": 
ele.innerHTML += "選択 され た 項目 :"+1tem+"<br>": 
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還 ビビ TI ロロ N-142 mW セレ クト メニ ュー で 選択 され た 頂 目 を 取得 する 


ete.tnnerHTML += "選択 され た 項目 の 文字 : "+text+"<br>": 人 め 、 必 
}, false): 
+ す ,。fqlse): 


ブラ ウザ で index.html を 表示 し 、| 選択 番号 と 項目 を チェ ッ ク | を クリ ッ ク す る と 、 セ レク トメ 
ニュ ー で 選択 され て いる 番号 や 項目 な ど が 表示 され ます 。 


' 半 所 され た 和室 ち 。2 ug 
選択 され た 項目 : drink 
選択 され た 項目 の 文字 : 飲料 


5 択 さ れ た 項目 の 情報 を 取得 する に は 「selectedIndex」 プロ パテ ィ や 


「value」 プロ パテ ィ 、 「text」 プロ パテ ィ を 使う 


セレ クト メニ ュー で 選択 され た 項目 に 関し て は 、 いく つか の 情報 を 取得 する こと が で きま 
す 。 まず 、 選択 され た 番号 に 関し て は 、 セレ クト メニ ュー オブジェ クト の 「selectedIndex | 
プロ パテ ィ に 人 っ て いま す 。 選択 され た 項目 の 値 ([「option | 要素 の 「value 」 の 内 容 ) は 、 
セレ クト メニ ュー オブ ジェ クト の 「 value」 プ ロ パ ティ に 入っ て いま す 。 

選択 され た 値 で は な く 、「options」 要素 で 指定 され て いる 文字 (実際 に メニ ュー に 表 
示さ れ て いる 文字 ) を 取得 する に は 、 選択 され た 「options」 配 列 の 「text」 プロ パテ ィ を 
使い ます 。 





テ ナ NHNAANUSN よ MIN EE に EK に 2 ミ Fm 
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LIE6 Chrome ! Safari 5 | Firefox 4 1 Opera11 』 OS4 1 Android 2 1WP」 


ETIHN-1 人 オヨ コ 


フォ ー ム 内 容 を 初期 化す る 


ここ で は 、 フォ ー ム 内 容 を 初期 化 (リセ ッ ト ) す る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<htmt> 





<hegd> 
<meto charset="utf-8"> 
<title>Sample</t1tle> 
<SCrtDpt Src="]S/sampte . ]S "></SCrtDt> 
</head> 
<body> 
<form name="enq"> 


<p><tnput type="text" value=" 与 作 "></p> 





ロ 
<p><textarea rows="4" cots="29"> 伐 採 中 で す </textareaq></p> 
<input type="button" vatue=" リ セッ ト す る " id="resetBtn"> に = 

</form> u 騰 - 

ま 

</body> ニュー 
</html> ン 
PP 
ザ 
= まい に 目 二 結 計 当 JavaScript の コー ド (sample.js) ! 
witndow.addEventListener("1oad"。 functton()1 ジ 
var btn = document.getEtementById("resetBtn"): ィ 


// ボタ ン に イベ ント を 割り 当て 
btn.addEventListener("cLtck"。 functton(Cevt)+ 
// 削除 する か 確認 する 
var flgg = conftrm(" 本 当 に 入力 内 容 を 初期 化し ます か ?"): 
tf (flog){ 
// ダイ アロ グ で 「OK」 が クリ ッ ク さ れ た の で リセ ッ ト を 実行 
thts .form.reset(): 
} 
}, folse): 
}, faqlse): 
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還 王 ピ ロ 丁 | 口 N -143 mW フォ ー ム 内 容 を 初期 化す る 


ブラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド と テキ スト エリ ア に 文字 を 入力 し て 、「[ リ 
セッ ト す る 」 ボ タン を クリ ッ ク す る と 、 確認 の ダイ アロ グ が 表示 され る ます 。 








BBHEII に 上 








フォ ー ム 内 容 を 一 括 し て 初期 化 (リセ ッ ト ) する に は 、「reset() 」 メ ノッ ド を 使い ます 。 
| reset() 」 メ ソ ッ ド は 、| form」 要素 で 「<input type='reset'">」 と し た 場合 と 同じ 役割 
に な り ま す 。 初期 化 さ れる の は 、 フォ ー ム 要素 内 の すべ て の エレ メン ト に な り ま す 。 


関連 項目 > ゅ 


「 】 リセ ッ ト 時 8 送信 時 に 処理 する NM も D.429 







=1 コ FallmlN 生 と と | 
数 値 専 用 の フィ ー ル ド で 値 を 増減 する 


ここ で は 、 数 値 専用 の フィ ー ル ド で 値 を 増減 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metqa charset="utf-8"> 
<tttle>SqmpLe</tttle> 
<SCcrtpt src="]S/sample .]S "></SCr1Dt> 
</head> 
<body> 
<form name="enq "> 


<D><1nput tyDpe="number" value="19”" 1d="num"></P> 





口 
<p><tnput type="button" vatue="1 加 算 " 1d="qddBtn1"> 
<tnput type="button" vatue="1 減 算 " 1d="subBtn1"></p> に ミ 
<p><tnput type="button" vglue="19 加 算 " 1d="qddBtn2"> は 
<tnput type="button" vatue="19 減 算 " 1d="subBtn2"></p> ブ に 

</form> に 

フウ 

</body> ザ 
</html> オ 
プ 

エ 

= た 中 = 直 相 = 下 = JavaSCriDt の コー ド (sample.jS) ク 
ト 


wtndow .aqddEventLitstener("1oad" 。 functton()+ 
// type="number" の 要素 を 読み 出し 
var orderNumber = document.getEtementBy1Td( "num"): 
// ボタ ン 要 素 を 読み 出し 
var aqddbtn1 = document.getEtementById( "addBtn1" ): 
var gddbtn2 = document.getELementById( "gddBtn2"): 
var subbtn1 = document.getEtementById( "subBtn1"): 
var Subbtn2 = document.getElLementById( "subBtn2"): 
// 1 加算 ボタ ン に イベ ント を 割り 当て 
addbtn1 .qddEventLtstener("cLtck"。 functton(evt)1{ 
// 1 を 加算 する 
orderNumber . stepUp( ): 
+。fqlse): 
// 19 加 算 ボ タン に イベ ント を 割り 当て 
qddbtn2 .qddEventLtstener("cLtck" 。 functton(evt)†+ 
// 19 を 加算 する 
orderNumber . stepUp( 19): 
}。 false): 
// 1 減算 ボタ ン に イベ ント を 割り 当て 
subbtn1 .qddEventLtstenerC"cltck", functton(Cevt){ 
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// 1 を 減算 する に 1 
orderNumber . stepDown( ) 

},。 false): 

// 19 減 算 ボ タン に イベ ント を 割り 当て 

subbtnZ . oddEventLtstener("cLtck"。 functton(evt){ 
// 19 を 減算 する 
orderNumber . stepDown( 19 ): 

}+。 faqtse): 

+, fatlse): 


ブラ ウザ で index.html を 表示 し 、 ボ タン を クリ ッ ク す る と 、 フ ィ ー ル ド の 値 が 加算 * 減 算 る きれ ます 。 











ボタ ン で 値 を 増減 さす る に は 
ml 「stepUp() 」 メ ソ ッ ド と 「steDDown()」 メ ソ ッ ド を 使う 


数 値 だ け を 扱う 場合 に は 、「input」 要素 に | type='number"」 を 指定 し ます 。 この よう 
に 指定 し た 場合 、 ボタ ン で 値 を 増減 きせ る に は 「stepUp() 」 メ ノッ ド と 「stepDown()」 メ 
ソ ッ ド を 使い ます 。| stepUp() 」 メ ソ ッ ド は 値 を 増やし 、「 stepDown (0 」 メ ノッ ド は 値 を 減 
らし ます 。 パラ メー タ を 何 も 指定 し な い 場 合 は 、 1 ずつ 増減 さす る こと が で きま す 。 パラ メー 
タ に 値 を 指定 し た 場合 は 、 そ の 値 の 分 だ け 、 増減 し ます 。 


テ NYHWAJS より NM に に 4 ミト e | 





関連 項目 ゅ ゅ 


ゅ フォー ム 人 本家 に アク セス ず す 衝 ho いい に は ツバ の いい hm 2734Nete AkonEt こ does p.319 
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LIE6 』Chrome 1 Safari 5 』 Firefox 4 1 Opera 11 OS4 ! Android2 IWP 


=1 ゴ iglmlN と に 
非同期 通信 オブ ジェ クト を 生成 する 


ここ で は 、 非同期 通信 オブ ジェ クト を 生成 する 方 法 に つい て 解説 し ます 。 


= まや 中 寺本 mg 引 赴 HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metg charset="utf-8"> 
<tttle>SaqmpLe</t1tLe> 
<SCrtPDt src="]S/sampLe .]S "></SCrtDt> 
</head> 
<body> 
<ht> 非 同期 通信 処理 </h1> 
<form method="get"> 
<input type="button" value=" 読 み 込 み " 1d="1ogdBtn"> 
</form> 
<OutDut></OutDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. addEventLitstener("toad" 。 functton()+ 





NIS よい NE に に 4 ミ a 


プ 
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var ele = document .getEtementsByTagName( "output")[9] : 
// 読み 込み ボタ ン に イベ ント を 割り 当て 
document .getEtementById("1oqdBtn") .qddEventLtstener("cltck", functton(evt){ 
// 非同期 通信 オプ ジェ クト 作成 
var xhr = createXMLHttpRequest( ) 
// 読み 込み 完了 時 の イベ ント ハン ドラ を 設定 
xhr.onload = functton(){ 
// 読み 込ん だ テキ スト を 出力 
ele.tnnerHTML = xhr.responseText: 
} 
// 同一 ドメイン の URL 上 の ファ イル を 指定 
xhr.open("get"。 "./data.htmlL" , true): 
xhr.send(null): 
}, false): 
}, false): 
// http 通 信用 、 TE 共通 関数 
functton createXMLHttpRequeSst()+ 
var XMLhttpOb]ject = null: 
try{ XMLhttpOb]ect = new XMLHttpRequest(): 
}catchCe){ 
try{ XMLhttpOb]ject = new ActtveX0b]ect( "Msxml2.XMLHTTP") う : 


NTHN 
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sm EC じ TIHN-1 人 4 非同期 通信 オブ ジェ クト を 生成 する 


+catch(Ce){ 4 
try{ XMLhttpOb]ect = new ActiveXOb]ject( "Mtcrosoft . XMLHTTP"): 
}catchCe){ return nult: + 
} 
} 
return XMLhttpOb]ect: 


} 


: 瑞 回 回 - 人 FRR 
: 非同期 通信 は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 ネッ トワ ー ク 環境 (Web サ ー バ ー 上 ) で 動作 : 
を 人 確認 し て くだ さい 。 
ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 非同期 通信 用 オプ ジェ クト が 生成 
され 、 サー バー か ら HTML フ ァイル が 読み 込ま れ 表 示さ れ ま す 。 


非同期 通信 処理 





Sampic tcxt 


IE9 以 隆 、 お よび 、 Firefox、 Safari、 Google Chrome、Opera な ど で は 、「XMLHttp 
Request」 オ ブ プ ジ ェ クト が 非同期 通信 を 行う オプ ジェ クト に な っ て いま す 。 IE9 よ り も 前 の IE 
で は ActiveX を 利用 し て 非同期 通信 用 オプ ジェ クト を 生成 する 必要 が あり ます 。 

また 、| readyState」 プロ パテ ィ と | status」 プロパ ティ を 利用 し て 通信 状態 に 応じ て 処 
理 を 行う こと も で きま す 。 「readyState」 プロ パテ ィ に は 、 次 の 0-ー4 ま で の 数 値 が 入り ます 。 


テ ケ NYHNAJNL 二 MIN EE に 2 Sa 


| statuns]」 プロ パテ ィ に は 、 サー バー か ら の ステ ー タ ス 番 号 が 入り ます 。[「200 | なら 
止 常 、|404] な ら フ ァイル が 見 つか ら な いこ と に な り ま す 。 ステ ー タ スコ ー ド に つい て は 、 
Wikipedia( 次 の URL) な ど を 参照 し て くだ さい 。 
wHTTP ス テー タス コー ド - Wikipedia 

http://j ヨ .WIkipedia.0rg/Wiki/HTTP ス テー タス コー ド 
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LIE6 1 Chrome | Safari 5 | Firefox 4 1 Opera11 1 iOS4 1 Android2 !WP 





=1 コ IriMlmlNa と すっ 
サー バー か が から テ キス ト デ ー タ や XML デー タ を 
受信 する 


ここ で は 、 サー バー か ら テ キス ト デ ー タ や XML デー タ を 受信 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<meta charset="utf-8"> 
<tttle>Sample</tttle> 
<SCrtDpt src="]S/sample.]S"></SCr1Dt> 
</head> 
<body> 
<h1> 非 同期 通信 で 読み 込む </h1> 


<form method="get"> 





JavaScript の コー ド (sample.jS) 


wtndow . addEventListener("1oaqd" , functton(){ 


[」 
<tnput type="button" vatue=" テ キス ト フ ァイル を 読み 込み "id="1oqdTextBtn"> = 
<tnput type="button" vatue="XML フ ァイル を 読み 込み "id="1ogdXMLBtn"> 1 

</formW> 内 
(= 

<OutDut></OUtDUt> ブ 

</body> と 

Me。 

</html> ザ 

オ 

フ 

っ が 

工 

ク 

ト 


var ele = document.getElementsByTagName( "output")[9]: 
// テキ スト ファ イル を 読み 込み ボタ ン に イベ ント を 割り 当て 
document .getELementById("1ogdTextBtn") .addEventLtstener("cLtck" functton(evt)+ 
// 非同期 通信 オプ ジェ クト 作成 
var xhr = new XMLHttpRequest( ): 
// 読み 込み 完了 時 の イベ ント ハン ドラ を 設定 
xhr.onload = functton(){ 
// 読み 込ん だ テキ スト を 出力 
ele.1nnerHTML = xhr.responseTex: 
} 
// 同一 ドメイン の URL 上 の ファ イル を 指定 
xhr.open("get"。 " ./data .txt" 。 true): 
xhr.send(null): 
}。 fatse): 
// XML ファ イル を 読み 込み ボタ ン に イベ ント を 割り 当て 
document .getEtementByTId("1oadXMLBtn") .addEventLtstener("clLtck",。 functton(evt)+ 
// 非同期 通信 オプ ジェ クト 作成 
var xhr = new XMLHttpRequest( ): 
// 読み 込み 完了 時 の イベ ント ハン ドラ を 設定 


xhr.ontoad = functton(){ 
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生 戸 己 ピ TI ロ NN-14 巳 wm サー バー か が から テ キス ト デ ー タ や XML デー タ を 受信 する 


// 読み 込ん だ XML を 解析 し て 出力 4 
Vor xml = xhr.responseXML : 
// <nqame> タ グ を ピッ クア ッ プ 
var nameLtst = xml.getElementsByTagName( "name"): 
// <nqme> タ グ の 数 だ け 繰 り 返 し て 表示 
for(var 1= の : 1<nameLtst.1ength: 1++){ 
// 名 前 を 読み 出し 
var ungme = nameLtst[1] .ftrstChitd.nodeVatue : 
ele.tnnerHTML += uname + "<br>": 
} 
} 
// 同一 ドメイン の URL 上 の ファ イル を 指定 
xhr.open("get",。"./datag.xml"。 true): 
xhr .sendCnul1l): 
+。 faqtse): 
}, fgqlse): 


XML(dataxm 


<Zxml verston="1.9" encodtng="utf-8"?> 





7 介 画 


テ NHW^NISH よ MINI に に に 248 ト Fa 





<Ltst> 
<uSer><name>Furuhata</name><DOwer>2899</power></uSer> 
<uSer><name>Yoshtngrt</name><DOwer>1789</power></uSeP> 
<uSer><nqme>Yamada</name><pOower>1589</power></uSer> 
<user><name>Takahasht</ngme><power>1589</power></uSer> 
</11st> 


回目 回 加 - 


非同期 通信 は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 ネッ トワ ー ク 環境 (WeDb サ ー バ ー 上 ) で 動作 
を 人 確認 し て くだ さい 。 


ブラ ウザ で index.html を 表示 し 、| テキ スト ファ イル を 読み 込み | ボタ ン を クリ ッ ク す る と 、 テ キス 
ト フ ァイル が 読み 込ま れ て 内 容 が 表示 され ます 。 


60ede Da/ サ ンプ ブル デ ッッ 」 MY 





| XML ファ イル を 読み 込み 」 ボ タン を クリ ッ ク す る と 、 XML ファ イル が 読み 込ま れ て <name> 
タグ の 最初 の ノー ド が 表示 され ます 。 
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和 mm 王 ビ ピロ T| ロ NN -1 オ 己 wm サー バー か ら テ キス ト デ ー タ や XML デー タ を 受信 する 


サー バー か が から テキ スト デー タ を 受信 する に は 「responseText」 プロ パテ ィ 、 
XML デー タ を 受信 する に は 「responseXML」 プロ バ パティ を 使う 


テキ スト デー タ は 、 デー タ 受 信 後 に 「responseText」 プ ロ パ ティ を 参照 し ます 。 テキ スト 
デー タ に 限ら ず 、 HTML フ ァイル で も JSON 形式 の ファ イル で も 読み 込む こと が で きま す 。 
XML ファ イル の 場合 、| responseXML」 プロ パテ ィ に XML デー タ が 入り ます 。 XML 


ロロ NEPU ロ INT 








3 較 

DOM に な る た め 、| getElementsByTagName() 」 メ ノッ ド や | nodeValue」 プロ パテ ィ ヽ ] 
を 使っ て ノー ド に アク セス する こと が で きま す 。 - 
カ 
EE ろ 
ま 潤 人 枯 オ プ ジ ャ クト 症 伸 導 生か oh 由 介 ん いい uto<t2ctte2tt2N 2< ト MoeJ20vt か rv D.337 サ 
オ 
フ 
ジ 
豆 
ンジ 
ト 
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LIE6 Chrome Safari 5 Firefox 4 』Opera11 | iOS4 』 Android2 I WP_ 





BE 上 ビビ T1 品 NN-1 人 4 オプ 


リク エス ト ヘ ッ ダ ー を 設定 する 

















ca ae 
内 ここ で は 、 サー バー に デー タ を 送信 する 際 の リク エス ト ヘ ッ ダ ー を 設定 する 方 法 に つい て 解 
| 説 し ます 。 
ーー HTML の コー ド (index.html) 
| <!DOCTYPE html> 
di <html> 
ロ | 
い | <heqd> 
<metq charset="utf-8"> 
+ <tit1e>Sqmple</ttt1e> 
oi <SCrtDt Src="]S/sample .]S "></scrtpt> 
1 </head> 
1 < も od 
画 <h1> リ クエ スト ヘッ ダー 書き 換え </h1> 
に <form method="get"> 
燈 <tnput type="button" value=" テ キス ト フ ァイル を 読み 込み " id="1ogdBtn"> 
A </form> 
ー ロ | プ <output></output> 
う Dod 
で 六 </html> 
= JavaScript の コー ド (sample.js) 
Pi で window.qddEventLtstenerC"1ogd"」 function(O{ 
ce var ele = document.getElLementsByTagName( "output") う [9] : 
Pl // XML ファ イル を 読み 込み ボタ ン に イベ ント を 割り 当て 
3 document . getEtementByTd("togdBtn").qddEventLtstener("cttck"。 functtonCevt){ 
N| // 非同期 通信 オプ ジェ クト 作成 
ーーー var xhr = new XMLHttpRequest( ): 
Q // 読み 込み 完了 時 の イベ ント ハン ドラ を 設定 
nl xhr.ontoad = function(O{ 
同 // 読み 込ん だ 内 容 を 出力 
本 ele.1tnnerHTML = xhr.responseText: 
} 


// 同一 ドメイン の URL 上 の ファ イル を 指定 
xhr.open("get"。"./datq.txt" 。 true): 
// キャ ッシュ し な いよ うに する CHTTP1 .1) 
xhr.setRequestHeader("Cache-Control",。 "no-cqche"): 
// リク エス ト 送 信 
xhr.send(Cnul1): 
},。 fatse): 
+,。 faqlse): 
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生 ビビ ロ 丁 | 口 N! - 1 スワ m リク エス ト ヘ ッ ダ ー を 設定 する 


HINIT| ーー Rec 
非同期 通信 は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 ネッ トワ ー ク 環境 (Web サ ー バ ー 上 ) で 動作 
を 確認 し て くだ さい 。 


ブラ ウザ で index.html を 表示 し 、| テキ スト ファ イル を 読み 込み 」 ボ タン を クリ ッ ク す る と 、 テ キス 
ト フ ァイル が 読み 込ま れ て 内 容 が 表示 され ます 。 


| リ み 三 も ハッ ッ ダ 書き 換え 


Sampls Data/ サ ン ブ ル デ ー タ 1 





テキ スト ファ イル の 内 容 を 更新 し 、 再度 、 ボタ ン を クリ ッ ク す る と 、| setRequestHeader () 」 メ 
ソ ッ ド で キャ ッシュ し な いよ うに し て いる た め 、 最新 内 容 が 読み 込ま れ ま す 。 





リク エス スト ヘッ ダ 書き 換え 





(2)Sample Dats/ サ ン ブ ル デ ー92 


リク エス ト ヘ ッ ダ ー を 設定 する に は 
mmlMI 「setRequestHeader()」 メソッド を 使う 








リク エス ト ヘ ッ ダ ー を 設定 する に は 、「setRequestHeader() 」 メ ソ ッ ド を 使い ます 。 最初 
の パラ メー タ に ヘッ ダー 名 、 2 番目 の パラ メー タ に 値 を 設定 し ます 。 リク エス ト ヘ ッ ダ ー で 指 
定 で きる 項目 と 内 容 は 、 次 の Web ペ ー ジ を 参照 し て くだ さい 。 
e HFCP616 
http://www.jetf.org/rfc/rfc26 1 6.txt 


miml 半 和 N 間 較 6ー け で キャ ッシュ デー タ が 利用 され る の を 回 避 す る 方 法 


IE6-9 の 場合 は 、 次 の よう に する こと で 、 キャ ッシュ デー タ が 利用 され る の を 回 避 で き 
ます 。 な お 、 日 付 は 扱う ファ イル の 更新 日 時 に 合わ せ て 変更 し て くだ さい 。 


var specDay = (new Date("2912/1/1")).toGMTStrtng(): 
xhr .setRequestHegder( "If-Modifted-Stnce", 







SDecDoy) : 





また 、HTTP1.0 に も 対応 する 必要 が ある 場合 は 、| setRequestHeader(Pragma , no- 
cache ) 」 と し て くだ さい 。 









テ ナ NYHN^NAIN り MIN EE ま 半 E に 4 ミト 
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7 人 画 


LChrome 』 Safari 5 | Firefox 4 1 Opera 11 | iOS 4 1 Android2 」 





BE ビビ TIHN-1 人 4 日 


MIME タ イブ を 設定 する 





ここ で は 、 MIME タ イプ を 設定 する 方 法 に つい て 解説 し ます 。 
3 HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
2 <meta charset="utf-8"> 
間 <t1ttlte>Sample</t1tte> 
<SCrtpt src="]s/sqmple.]S"></scrtpt> 
</head> 
0 
| <h1>MIME タ イプ 書き 換え </h1> 
<form method="get"> 
<tnput type="button" vglue=" テ キス ト フ ァイル を 読み 込み " id="1oqdBtn"> 
</form> 
< く OUtDut></OutDut> 
</body> 
</html> 





JavaScript の コー ド (sample.js) 
wtndow.aqddEventLtstener("1oad",。 functton(){ 
var ele = document.getElementsByTagName( "output")[9@]: 
4 // XML ファ イル を 読み 込み ボタ ン に イベ ント を 割り 当て 
document.getE1ementByTdC"1ogdBtn").qddEventListenerC"cltck",functtonCevt){ 
// 非同期 通信 オプ ジェ クト 作成 
var xhr = new XMLHttpRequest(): 
// 読み 込み 完了 時 の イベ ント ハン ドラ を 設定 
所 xhr.onload = functton(){ 
// 読み 込ん だ 内 容 を 出力 
w ele.tnnerHTML = xhr.responseText: 
} 
// 同 二 ドメイン の URL 上 の ファ イル を 指定 
xhr.open( "get"。"./datg.txt" true): 
tf (xhr.overrtdeMtmeType){ 


テ ナ NTHNAJUSH は MIN EE ま E4S 


xhr .overrtdeMimeType("text/ptatn:charset=shtft_]jts"): 
} 
xhr.send(Cnull): 
} す 。 false): 
+, false): 


sl 回 asia 人 082 [ 


非同期 通信 は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 ネッ トワ ー ク 環境 (Web サ ー バ ー 上 ) で 動作 
を 確認 し て くだ さい 。 


の の の の の G ゐ の の もの の の の の の の あの の ゐ の も る な の の の ひみ あ G の る の の の ゐ ゐ の の G の の の の の ゆ の の の の の の の の ひ の の ひで の ひ の ④ の ひひ や の の の ざさ ゐ @ の の の の の の ゐ ひ の の の の の の ひ の の の の の の の の G ゐ らら の の の の G の おら ね の の の の の ゐ ム の の の の ちの の の や や ひ の の の させ の の の の の ひ の の の の る ②③ る か ぶる の 9 の の の の の の ooo0@9 ゅ beyoseseeeeee 


生 選 ビビ ロ T| 口 NN -1 オ 日 m MIME タ イプ を 設定 する 


ブラ ウザ で index.html を 表示 し 、|「 テキ スト ファ イル を 読み 込み 」 ボタ ン を クリ ッ ク す る と 、 Shift 
TIS コ ー ド の テキ スト ファ イル が 読み 込ま れ て 内 容 が 表示 され ます 。 


Sample 
を うう @A  〈%〔{( ペ 


MIME タ イブ 書き 換え 


Samps Dat/ る 1 る. る る ぐ 「@[ る (Shit 
JIS 


ms=INm 下 MIME タ イプ を 設定 する に は 「overrideMimeType()」 メ ソ ッ ド を 使う 


非同期 通信 で サー バー か ら 受 信 し た デー タ の MIME タ イプ を 上 書き する に は 、| over 
rideMimeType() 」 メ ソ ッ ド を 使い ます 。 これ に よっ て 、 XML デー タ や 文字 コー ド に よっ 
て 文字 化け し て し まう 現象 を 解消 する こと が で きま す 。 

な お 、「 overrideMimeType() 」 メ ソ ッ ド は 、 IE6-9 に は 実装 され て いな いた め 、 その 
まま 呼び 出す と エラ ー に な り ま す 。 








ブナ NHN^AJINH よ MIN EE だま E に 4se 
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LIE8 1 Chrome Safari 5 」 Firefox 4 1 Opera11 | iOS4 」 


BE ビビ TIHN-1 オ 9 


デパ ッ グ コン ソー ル に 文字 を 出力 する 











ロ 
| ここ で は 、 デバ ッ グ コン ソー ル に 文字 を 出力 する 方 法 に つい て 解説 し ます 。 
還 HTML の コー ド (index.html) 
_j <!DOCTYPE html> 
選 <html> 
ーーー- 0 
ロ | <metq charset="utf-8"> 
| <tttle>Sqmpte</t1t1e> 
ロ <Scrtpt src="]s/sagmpte.]S "></script> 
| </head> 
二 1 
由 <output></output> 
本 こ 且 
</html> 
和音 
n JavaScript の コー ド (sample.jS) 
ー ロ プ wtndow.aqddEventLtstener("1oad" 。 functton(){ 
| ウ var ete = document.getE1ementsByTagName("output")[9]: 
8 4 // 1 か ら 19 ま で を 加算 
MI ブ var total = 09: 
ーー ジ forCvar 1=1: it<=19: i++){ 
ロ | ツ total = total + 1: 
Wa ト // デバ ッ グ コン ソー ル に 出力 
| console.1ogC+" = "rtotalD: 
N | ele.1tnnerHTML = totol: 
| +, false): 


PP の も の の の でも の の の も の の の の の の も の の の の の も の の の ④ ひ や の の の の ら の の ら ゅ の の の の の の の の の や ① や の の の の の の の @@⑨ の お ゐ む 必 の ひ の ④⑨ も の ゐ の の の ④ ひ の @ ゐ の の や の や ゐ か ひらの の る の @ ひ る ひも の も る @ る poppwwegoeeeeeeeeeeeeoeeeeeeweegeee 


を il 1 
回 
回 
| 
回 


で ゃ の の ゐ ら の ゆで みみ ゐ る の AG の の ゆる の の の の ひひ ず の @ や の の の の ふむ の の や のみ 必 る の みよ も ふ の や の の の の の る の の の の ちら の の ひ わす の の G ず な びび ひで ず @ で る の づる の る ぐる の の の すず の ゅ ゆび の の お の G@ の ゆき る の る お の る 99689W6 さ soaoas 


ブラ ウザ で index.html を 表示 する と 、 デバ ッ グ コン ソー ル に 文字 が 表示 され ます 。 


思 呈 ビ ロ TI ロロ N-149 m デバ ッ グ コン ソー ル に 文字 を 出力 する 


ファ イル (F) 検索 (N) 無 区 化 (5) 表示 (V) イメ ー ジ () キャ ッシュ (C) ツー ル T) 本 (A) | 





プラ ウザ ー モー 1E90@) ドキ ュ メン ト モー ド : IE9 林 (Y) 口 Rey 





-CSS | コン ソー ル 5 スク リプ ト プロ ファ イラ ー ネッ トワ ー クー ーー ニー アロ 


mislNm 画 デバ ッ ガ の コン ソー ル に 出力 する に は 「console.Iog()」 メ ソ ッ ド を 使う 


現在 の ブラ ウザ に は 、 標準 で デバ ッ ガ が 入っ て いま す 。 デバ ッ ガ に は デバッグ 用 の コン 
ソー ル が あり 、 avaScript で は 「console」og() 」 メ ノッ ド を 使っ て 出力 する こと が で きま す 。 
パラ メー タ は [「,」 (カン マ ) で 区 切っ て 列記 する こと が で きま す が 、 出力 結末 は ブラ ウザ に 
よっ て 若干 、 異な る 場合 が あり ます (IE で は 複数 の パラ メー タ を 指定 し た 場合 、 出力 結 
果 が 半角 空白 で 区 切ら れ な い ) 。 


品 m 品 IN 議 |COnSOIe.IOg( )」 メソ ッ ド の 出力 結果 に つい て 


デバ ッ グ コン ソー ル に は 、「log() 」 メ ノッ ド を 使っ て 出力 し た 文字 が 表示 され ます 。 この 
と き 、 変数 の 内 容 を 出力 する こと で 、 プロ グラ ム の ミス を 発見 し や すく な り ま す 。 Firefox 
の 標準 の デバ ッ ガ 以外 で は 、「 コン ソー ル 」 タ ブ を 選択 する と | log 」 メ ソ ッ ド で 出力 され 
た 結果 が 表示 され ます 。 Firefox の 標準 の デバ ッ ガ で は 、 メニ ュー か ら Web コ ン ソ ー ル を 
選択 する と 表示 され ます 。 


ビ ロ LUNMNI IE の 場合 


IE の 場合 、 開発 者 ツー ル ( デ バッ グ ツ ー ル ) を 表示 し て いな いと | console」 オ プ ジ ェ クト 
が 存在 し な いた め 、 その まま 、[ consolelog() 」 と する と 、 エラ ー に な り ま す 。 
















テ NTHNA へ JUSH は TAMIN に に まき WE に 4 ミド 
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還 選 E ビ ピロ T| 口 NN-1 オ 9 mm デバ ッ グ コン ソー ル に 文字 を 出力 する 


ma に 間 較 その 他 の コン ソー ル 出 力 用 メソ ッ ド 


| console.log() 」 メ ソ ッ ド 以外 に も 、 次 の 表 の 出力 用 メソ ツ ッ ド が あり ます 。 いずれ も ゃ 、 出 
力 時 に 区 別 す る た め だ け の も の で す 。 IE な ど で は 、 出力 する 文字 の 先頭 に 警告 アイ コ 
ン な ど が 追加 きれ ます 。 








miml 凍 記 上 較 ナ バ ッ 力 を 表示 する に は 


デパ ッ ガ は 、 開発 時 に 便利 な ウー ル で す 。 それ ぞ れ の ブラ ウザ に よっ て 表示 する 方 法 
は 、 次 の よう に な り ま す 。 
p IE の 場合 

F12 キ ー を 押し ます 。 
p Google Chrome の 場合 

設定 」 ボ タン か ら 「 ツ ー ル 」~「JavaScript コ ン ソ ー ル 」 を 選択 し ます 。 

p Firefox の 場合 

Windows の 場合 は 「Firefox」 一 「 Web 開 発 」…「Web コ ン ソ ー ル 」 を 選択 し ます 。 Mac 
の 場合 は |「 ツ ー ル 」 メ ニュ ー か ら 「 Web 開 発 」ー「Web コ ン ソ ー ル 」 を 選択 し ます 。 
p Safari の 場合 

環境 設定 の 詳細 で 「 メニュー バー に "開発 "メニ ュー を 表示 」 の チェ ッ ク を ON に し た 後 、 
| 開発 」 メ ニュ ー か ら 「 エ ラー コン ソー ル を 表示 」 を 選択 し ます 。 
p iPhone/iPad の Safari の 場合 

ホー ム 画 面 で | 設定 ] を タッ プ し 、 Safari の 項目 を タッ プ し ます 。 その 後 、 一 番 下 の 詳 細 
を タッ プ し 、| デバ ッ グ コン ソー ル 」 を 「 オ ン 」 に し ます 。 
p Opera の 場合 
| ツー ル 」 メ ニュ ー か ら 「 詳 細 ツ ー ル 」 一 「Opera Dragonfly」 を 選択 し ます 。 

























関連 項目 ょ ゅ 


@e デバ ッ グ コン ソー ル に オブ ジェ クト の 内 容 を 出力 する かす 4 な Sp 生 人 KC まる さわ な p.349 
e 作 理 | こら や た 時 間 を 詳細 に 把握 する で q で せ ヨ や ]i1 和 上 ト る ス ーー 20 に 202 Dp.35 1 
者 た 放 拉 も RM 本 笠間 0 議 全 AKA 4 を keetA4R4242082A2348RSASAAL2AU EAIMSSUGkaa。 Dp.353 


LIE8 』 Chrome 』 Safari 5 ! Firefox 4 1 Opera11 1 iOS4_ 


ら つら に た に し) 11ENNh に の に 


デバ ッ グ コン ソー ル に オブ ジェ クト の 内 容 を 
ーー トー 


ここ で は 、 デバ ッ グ コン ソー ル に オブ ジェ クト の 内 容 を 出力 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttte>SampLe</t1tle> 
<SCrtDt src="]S/sample.]S "></SCr1Dt> 
</heqd> 
<body> 
<p> デ バッ グ コ ン ソ ー ル を 参照 し て くだ さい </p> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("Loqd" 。 functton( ){ 
// デパ バッ グ コ ン ソ ー ル に window オ プ ジ ェ クト を 出力 
console .dtr(wtndow): 

+,Tfqlse): 


IINTI 
IE の 場合 は 、 開発 者 ツー ル を 表示 し て か ら 、 index.htm| を 表示 し て くだ さ 





ブナ NTHNAJSHNTMN EE に まき に 4 Sa 


ブラ ウザ で index.html を 表示 する と 、 デバ ッ グ コン ソー ル に オブジェ クト の 内 容 が 表示 され ます 。 


ファ イル (F) 検索 (N) 無効 化 (S) 表示 (V) イメ ー ジ () キャ ッシュ (C) ツー ル T) 栓 年 A) | 
プラ ウザ ー モー ド : iE9(B) ドキ ュ メン ト モー ド : 1E9 林 (9) 





HTML css 「 コ ンジ ソー スク リプ ト プロ ファ イラ ー ネッ トワ ー クー 
散 
ロリ: [ob]ject window] { 
console : ob]ect] , 
_ TE DEVTOOLBAR CONSOLE CONWAND LINE : [object] , 
document : [ob]ect Document] 。 
styleNiedia : [ob]ject て Styleftedia ] , 
c1ientTFnformation : [ob]ect Navigator] , 
c1ipboardData : [object DataTransfer] 。 
て losed : fa]se, 
defaultStatus : “" 
_ を で VeRt = Iobect SEventOb11 上 595595 和 VM}〔QWQUwQ 和 
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7 回 
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還 王 ロ 丁 | 口 N!-15 口 mW デバ ッ グ コン ソー ル に オブ ジェ クト の 内 容 を 出力 する 


= ヨ ml 上 オブ ジェ クト の 中 身 を 確認 する に は 「console.dir()」 メソ ッ ド を 使う 


JavaScript は オブ ジェ クト 指向 言語 で あり 、 非常 に 多く の オブ ジェ クト を 扱い ます 。 標 
人 準 で 用 意 さ れん て いる も の だ け で な く 、 プロ グラ マ が オブ ジェ クト を 作成 する こと も で きま す 。 

その 際 、 オプ ジェ クト の プロ パテ ィ な ど が どの よう な 状態 に な っ て いる か を 確認 し た い 
場合 が あり ます 。 確認 する と き に 便利 な の が | console.dir() 」 メ ソ ッ ド で す 。 「console.dir 


り 」 メ ソ ッ ド の パラ メー タ に オプ ジェ クト を 指定 する と 、 デバ ッ グ コン ソー ル に オブ ジェ クト の 
内 容 が 展開 で きる 状態 で 出力 され ます 。 こ れ に よっ て オブ ジェ クト の 内 容 が どの よう に な っ 
て いる か 把握 する こと が で き 、 デバ ッ グ の 手助け に な り ま す 。 

な お 、 オブ ジェ クト に は プロ パテ ィ と メソ ッ ド が あり 、 デバ ッ グ コン ソー ル に は | プロパティ 
名 : 内 容 」、 また は 、| メソ ッ ド 名 : 内 容 」 の 形式 で 出力 され ます 。 


mm 肖 82 に 間 較 |COnSOle.dir( ) 」 メソッド の 出力 結果 に つい て 


| console.dir() 」 メ ソ ッ ド の 出力 結果 は 、Firefox の 標準 の デバ ッ ガ 以外 で は 、「 コ ン 
ソー ル 」 タ ブ を 選択 する と 表示 され ます 。 Firefox の 標準 の デバ ッ ガ で は 、 メニ ュー か ら 
Web コ ン ソ ー ル を 選択 する と 表示 され ます 。 









関連 項目 ょ ゅ 


デ / ドッ グ コ ン ソ ー) ル に 文字 を 出力 する (たる 2 すま 6 演 人 全 る さ は 交 を も は な 42 0p.346 
和 処理 に か か っ た 時 間 を 詳細 に 把握 する 008 が Gi あな D.35 ] 
『] 呼び 出し 元 の 関数 を 把握 する 人 YR アピ 3 人 D.353 


LChrome 』 Safari 5 | Firefox4_ 





=1 コ maglmlN 還 に 3 
処理 に か か っ た 時 間 を 詳細 に 把握 する 


ここ で は 、 デバ ッ ガ を 利用 し て 処理 に か か っ た 時 間 を 詳細 に 把握 する 方 法 に つい て 解説 し 
ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>SampLe</t1tle> 
<SCPrtDt src="]S/Ssqmple.]S"></sCr1Dt> 
</head> 
<body> 
<p> デ バッ グ コ ン ソ ー ル を 参照 し て くだ さい </p> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


window.aqddEventLtstener( "load" 。 functton(){ 
// 処理 時 間 の 計測 を 開始 
console.profttle( "test1"): 
// 計測 する 処理 を 記述 
for(var q=[] , 1= の 9: 1<199999: 1++){ 
Gt] = も 1 すもも すす モミ./ の 9. は: 





ブナ NHNANJUH は MI に に に 4 ミト | 


var n = qbc(1): 
} 
// 関数 
function obcCn){ return Math.pow(2。n): } 
// 処理 時 間 の 計測 を 終了 
console.profileEnd("test1"): 
}, false): 


敵国 
Firefox で は 、 に 
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還 王 ビビ ピロ TI 口 NN -15 1 mW 処理 に か か っ た 時 間 を 詳細 に 把握 する 


ブラ ウザ で index.html を 表示 する と 、 デバ ッ グ コン ソー ル に 関数 の 処理 に か か っ た 時 間 な 
ど が 詳細 に 表示 され ます 。 
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=iia コ = に 下 処理 時 間 を 詳し く 計 測 す る に は プロ ファ イル を 利用 する 


特定 の 関数 や 処理 に どの くら い 時 間 が か か っ て いる か 計測 する に は 、 プロ ファ イル を 
利用 し ます 。 計測 し た い 範 囲 の 最初 に 「console.profile () 」 メソ ッ ド を 指定 し 、 範囲 の 
最後 に | console.profileEnd() 」 メ ソ ッ ド を 指定 し ます 。 複数 箇所 で 計測 を 行う 場合 に 
は 、|「 console.profile () 」 メソッド の パラ メー タ に 名 前 を 指定 し て お く こ と が で きま す 。 な お 、 
1000 ミ リ 秒 より 小さ きい 時 間 は 計測 で きま せん 。 


mml 還 四 に 上 | COnSOIG.DrOfile() 」 メソ ッ ド の 出力 結果 に つい て 


Google Chrome と Safari の 場合 、| console.profile() 」 メソ ッ ド の 出力 結果 に つい て 
は 、 デバ ッ ガ の | Profiles」 タブ の | test1] を クリ ッ ク す る と 表示 され ます 。 Firefox で は 
Firebug を 使い 、| プロ ファ イル 」 タ ブ を クリ ッ ク す る と 結果 が 表示 され ます 。 な お 、「testl 」 
が 表示 され て いな い 場 合 は 、 プラ ウザ の 再読 み 込 み ボ タン を クリ ッ ク し て くだ さい 。 











関連 項目 


ゅ プリ バッ グ コ ャ バ /UDRDR 着 た 条 ook3br ru0ovitvstt226RSSG38Re90。e。><o> p.346 
e デバ ッ グ コン ソー ル に オブ ジェ クト の 内 容 を 出力 する … 代 m……… セ ーー……ーー…… p.349 
$ 骨 お 有 光 の 押 教 友 旨 導 才 nite なく 8N0200728800D08KASve eee p.353 


=1 ヨ mlglmlN 所 に と 
呼び 出し 元 の 関数 を 把握 する 


ここ で は 、 デバ ッ ガ を 利用 し て 実行 し て いる 関数 が 、 どこ か ら 呼 び 出 され た の か を 把握 する 
方 法 に つい て 解説 し ます 。 
HTML(index.html) 


<!DOCTYPE html> 
<htmt> 





<head> 
<meta charset="utf-8"> 
<tttle>Sqmple</t1tle> 
<SCr1pt Src="]S/Sqmple .]S"></SCr1Dt> 
</hegd> 
<body> 
<p> デ バッ グ コ ン ソ ー ル を 参照 し て くだ さい </p> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oad" 。functton(){ 
// 計測 する 処理 を 記述 
var n = obc(2): 
// 関数 
functton qbc(n){ 
// コー ルス タッ ク を 表示 


console.trace( "nest1"): 





NIAH 二 TMINJ EE に に 248 は 


/ 
ワ 


テテ い NTHN 


return mFuncCn, 4): 

} 

// 関数 その 2 

functton mFunc(num,n){ 
// コー ルス タッ ク を 表示 
console.trace("nest2"): 
return Maqth.pow(Cnum, n): 

} 

+, faqlse): 


う 353 
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還 王 ビ ビ ピ TI 口 NN-1522 W 呼び 出し 元 の 関数 を 把握 する 


ブラ ウザ で index.html を 表示 する と 、 デバ ッ グ コン ソー ル に 呼び 出し た 関数 の スタ ッ ク が 表 
示さ れ ま す 。 


〒 Conso1e .t 上 Face( ) 


ab て 

〈anonymous 関 寺 ) 
Y conso1e .trace( ) 

下 FunC 


ab て 
(anonymous 関 教 ) 


=ia=l に NM 中 呼び 出し 元 の 関数 を 調べ る に は 「console.trace()」 メソッド を 使う 


プロ グラ ム が 複雑 化 、 肥大 化す る と 、 どこ か ら 呼 び 出 され て いる の か 把握 し に くく な り ま 
す 。 関 数 が どこ か ら 呼 び 出さ れ て いる か を 調べ る に は 関数 内 で |「 console.trace()) 」 メ ソ ッ 
ド を 使い ます 。| console.trace() 」 メ ソ ッ ド を 使う と 、 呼び 出し て いる 関数 が スタ ッ ク で ( 呼 
び 出 し 順番 に ) デ バッ グ コ ン ソ ー ル に 表示 され ます 。 

デバ ッ ガ に よっ て 、 どこ まで 詳し く 表 示さ れる か 異な り ま す が 、 Firebug で は 関数 に 渡さ 
れ た パラ メー タ の 値 も 確認 する こと が で きま す 。 「 


mm 融和 記 較 是 「COTnSOIe.traCe( ) | メソッド の 出力 結果 に つい て 


| console.trace ( 」 メ ソ ッ ド の 出力 結果 は 、 Firefox の 標準 の デバ ッ ガ 以外 で は 、| コ 
ン ソ ー ル 」 タ ブ を 選択 する と 表示 され ます 。 Firefox の 標準 の デバ ッ ガ で は 、 メニ ュー か ら 
Web コ ン ソ ー ル を 選択 する と 表示 され ます 。 









関連 項目 と | 


@e デバ ッ グ コン ソー ル | こ 文 字 を 出力 する ーー に ドン amemeemeeneneenreneenernenren p.346 
e デバ ッ グ コン ソー ル に オブ ジェ クト の 内 容 を 出力 する ……( ll{({({† 〔roo で で eeeeem… p.349 
e 仙 理 に か か っ た 時 間 を 詳細 に 把握 する oneneeneeneenenent 0D.35 1 
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LIE6 』Chrome Safari 5 | Firefox 4 1 Opera 11 | iOS4 Android2 1 WP 」 


DE、E が は も 1 は トト 09 選 


特定 の ID 名 を 持つ 要素 に アク セス する 








ここ で は 、 特定 の ID 名 を 持つ DOM 要 素 に アク セス する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq Charset="utf-8"> 
<tttte>SampLe</t1t1te> 


<SCPtDt src="]S/sample .]S"></sCrtpt> 





</head> 
<body> 
<h1 td="myHeader">DOM へ の アク セス </h1> 
<ul> 
<tt> 項 目 1</11> 
ロ <ti> 項 目 2</11> 
エ <11 1d="myTtem "> 項目 3</11> 
1 ン 
1 <li> 項 目 4</11> 
ー 
円 </ul> 
な /bod 
< 
ロ ア > 
〇 </html> 
に 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("toad"。 functton(){ 
// 指定 し た TID 名 を 持つ 要素 の 色 を 赤 に する 
document .getElLementById("myHegder").style.color = "red": 
// 指定 し た ID 名 を 持つ 要素 の 内 容 を 「Ttem 3」 に する 
document .getElementById( "myItem").1tnnerHTML = "TItem 3": 
+。fqtse): 


ブラ ウザ で ndex.html を 表示 する と 、 ペー ジ 内 に ある 要素 に 対し て 操作 が 行わ れ て 、 見 出 
し 文字 の 色 が 赤色 に 変化 し 、 リ スト 項目 は 「 項目 3] か ら 「Item 3] に 内 容 が 変更 され ます 。 


IDOM へ の アク セス 


・] 自 日 1 
・」 目 日 2 
* jtem 3 


*・ 日 4 
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m 戸 ビ ピロ TI ロロ N-15 ヨ wm 特定 の ID 名 を 持つ 要素 に アク セス する 


ブラ ウザ は ペー ジ 内 の 要素 は 、DOM (Document Object Model ド キュ メン ト オ ブ ジェ 
クト モデ ル ) ツ リー と し て 内 部 で 構築 きれ て いま す 。 ペー ジ 内 の 要素 は DOM ツ リー と し て 
アク セス する こと が で きま す が 、 順番 に ツリ ー を た どっ て いく と 、 アク セス まで に 時 間 が か 
か り ま す 。 そこ で 、 有 要素 に ID 名 を 指定 し て お く こ と で DOM ツ リー を た どる こと な く 直 接 、 そ 
の 要素 を 操作 する こと が で きま す 。 

直接 、 要素 を 操作 する に は 、| getElementById () 」 メ ノッ ド の パラ メー タ に 、 アク セス し 
た い 要 素 の ID 名 を 文字 列 で 指定 し ます 。 また 、| getElementById () 」 メ ソ ッ ド で 得 ら れ 
た 結果 を 変数 に 入れ て お け ば 、 さら に 高速 に 要素 に 対し て アク セス で きる よう に な り ま す 。 


mm 員 穫 還 較 | (OM の 読み 込み タイ ミン グ 


サン プル で は | load」 イ ベン ト 発 生後 に 要素 を 操作 し て いま す が 、 現在 、 使用 され て い 
る 多く の プラ ウザ で は DOM の 構築 が で きた 際 に 「DOMContentReady」 イ ベン ト が 発 
生 し ます 。 少し で も 早く ペー ジ 内 操作 を 行い た い 場 合 に は 、「DOMContentReady」 イ 
ベン ト 発 生後 に 処理 を 行う の が よい で し ょ う 。 また 、 ス マー ト フ ォ ン な ど で は ペー ジ の 最後 に 
| script」 要素 を 記述 する こと で 、 より 速く ペー ジ の 読み 込み 処理 を 行う こと が で きま す 。 
また 、iOS 5 で は 、| script」 要素 の | async」 属 性 で 、 同期 か 非同期 で スク リプ ト フ ァイル 
み 込 むと いう 指定 が で きる の で 、 これ ら を 利用 する の も よい で し ょ う 。 

















関連 項目 ' 
e 特定 の スタ イル シー トク ラス を 持つ 要素 に アク セス する …………… ド ーーー… DO p.358 
9 拓夫 名 を 指 夫 し て アウ セス 生 才 1 … の の ドド ツーt 全 KN お Stan お huA95Y 2 p.360 
@ 特定 の 名 前 を 持つ 要素 に アク セス す ? …… ポ ーー ポツン ドド ドド D.36g 
e セ レク タ た 合っ て 机 生 に アク セス ずる oe at 導 才 aO7TIS NoeyWNt っ s- 1 p.364 
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LIE6 』 Chrome Safari 5 | Firefox 4 Opera 11 1 iOS4 』 Android2 1WP」 


BE ビビ TIHN-15 ら 人 4 


特定 の スタ イル シー トク ラス を 持つ 要素 に 
アク セス する 


ここ で は 、 特定 の スタ イル シー トク ラス を 持つ 要素 に アク セス する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metq Charset="utf-8"> 
<tttle>SqmpLe</t1tle> 
<SCr1Dt Src="]S/Ssample . ]S "></SCr1Dt> 
</head> 
<body> 
<h1> 特 定 の CSS ク ラス を も つ 要 素 へ の アク セス </h1> 
<ul> 
<tt class="1otus"> 項 目 1</11> 
<1t class="note"> 項 目 2</1i> 
<t> 項 目 3</11> 
<lt class="note"> 項 目 4</11> 
<1i class="note"> 項 目 5</11> 
<l1t class="coution"> 項 目 5</11> 


</ul> 





AO コ ヨ エ コマ ロロ 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. addEventLtstener( "Loqd" 。 functton(){ 
// 指定 し た CSS ク ラス を 持つ 要素 を 返す 
var ltst = document.getElLementsByClqssName( "note"): 
// 繰り 返し 処理 し 、 背景 人 色 を オレ ンジ 色 に する 
for(var 1= の 9: 1<ltst.tength: 1++){ 
ltst[1] .style .backgroundCotor = "orange": 
} 
}, faqlse): 
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m ビ ビ ロ TI 口 NN-15 wm 特定 の スタ イル シー トク ラス を 持つ 要素 に アク セス する 


プラ ウザ で index.html を 表示 する と 、 要素 で 「note」 ク ラス を 持つ 要素 の 景 色 が オレ ンジ 
色 に な り ま す 。 


特定 の CSS ク ラス を も つ 
要素 へ の アク セス 


・」 上 日 1 
・」 日 3 


・」 自 卓 ? 





特定 の スタ イル シー トク ラス を 持つ 要素 に アク セス する に は 
「getElementsByClassName()」 メ ソ ッ ド を 使う 


要素 に は 、「class」 属 性 で CSS ク ラス を 指定 する こと が で きま す 。 この CSS ク ラス で 特 
定 の 名 前 が 指定 され た 要素 を 取り 出す に は 、| getElementsByClassName() 」 メ ソ ッ ド 
を 使い ます 。 パラ メー タ に は 、 CSS ク ラス 名 を 文字 列 で 指定 し ます 。 

指定 で きる クラ ス 名 が 2 つ 以 上 ある 場合 は 、「 getElementsByClassName(xl turbo )」 
の よう に 半角 空白 で 区 切っ て 指定 し ます 。 これ は [class」 属 性 に 複数 の CSS ク ラス を 指定 す 
る 場合 と 同じ で す 。 

「getElementsByClassName() 」 メ ソ ッ ド は 、 該当 する 要素 を ノー ドリ スト と し て 返し ま 
す 。 avaScript で は 、 ノー ドリ スト は 配列 と 同じ よう に アク セス する こと が で きま す 。 

「getElementsByClassName() 」 メ ノッ ド は 、「document」 オ ブ プ ジ ェ クト だ け で な く 、 他 の 
要素 を 基準 に し て 使う こと も で きま す 。 た と えば 、「documentigetElementById (ma ). 
getElementsByCalssName(mz ) 」 と する と 、 ID 名 が 「maim」 の 要素 内 の |mz」 ク ラス 
を 持つ 要素 だ けが 対象 に な り ます 。 






NIImII に IE 














関連 項目 ょ ゅ 


e 特定 の ID 名 を 持つ 要素 に アク セス する …… ド ドド ドド eememeeomeeoennnrmr p.356 
e 要素 名 を 指定 し て アク セス する … oo p.360 
e 特定 の 名 前 を 持つ 要素 に アク セス する ……… ド | じ |imirrnrnrnei OR p.362 
e セレ クタ を 使っ て 要素 に アク セス する … ooneeenrrnrreornorrnorrrre p.364 





OO に に ま 本 に 4 ミド 
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LIE6 』 Chrome Safari 5 』 Firefox 4 | Opera 11 | iOS 4 1 Android2 [WP_ 


et IL コ JIN-1555 


腔 素 名 を 指定 し て アク セス する 


ここ で は 、 要素 名 を 指定 し て アク セス する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<hegd> 
<metq charset="utf-8"> 
<tttle>SqgmpLe</t1t1e> 
<SCP1Dt src="]S/sqmple.]S "></scrtpt> 
</head> 
<body> 
<h1> 要 素 名 を 指定 し て アク セス </h1> 
<Ul> 
<tt> 項 目 1</11> 
<li> 項 目 2</11> 
<lt><span> 項 目 3</span></11> 
</ul> 
<p><span> 注 意 </span> 一 時 停止 する 場合 が あり ます 。 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oqgd", function(){ 
// 指定 し た 要素 名 を 持つ 要素 を 返す 
Var Ltst = document.getElementsByTagName( "span"): 
// 繰り 返し 処理 し 、 背景 色 を オレ ンジ 色 に する 
for(var 1= の : 1<ltst.1ength: 1++){ 





唄 0 ロ ココ ヨ ュ コマ ロロ 


ltst[1] .style.backgroundCotor = "orange": 


} 
+, fatse): 


プラ ウザ で index.html を 表示 する と 、| span」 要 素 の 背景 色 が オレ ンジ 色 に な り ま す 。 


要素 名 を 指定 し て アク セ 
ス 


・」 自 日 1 
・」 自 日 2 


・ 項目 3 
衣 議 一 時 停止 する 場合 が あり ます 。 
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m 選 ビ ヒロ 丁 | 口 N!-15 ら 5 wm 要素 名 を 指定 し て アク セス する 


要 雪 名 を 指定 し て アク セス する に は 、| getElementsByTagName() 」 メ ソ ッ ド を 使い 
ます 。 | getElementsByTagName() 」 メ ソ ッ ド の パラ メー タ に は 、 要素 名 を 文字 列 で 
指定 し ます 。 

「getElementsByTagName() 」 メ ノド は 、|「 docurment」 オ ブ ジ ェクト だ け で な く 、 他 の 
要 雪 を 基準 に し て 使う こと も で きま す 。 た と えば 、「document.getElementById(main ). 
getElementsByTagName("div) 」 と する と 、 ID 名 が 「mam」 の 要素 内 の 「div] 妥 素 だ 

けが 対象 に な り ま す 。 











関連 項目 


e 特定 の ID 名 を 持つ 要素 に アク セス する …… ド ET p.356 
e 特定 の スタ イル シー トク ラス を 持つ 要素 に アク セス する …" ii_ で ETTTT p.358 
e 特定 の 名 前 を 持つ 要素 に アク セス する io p.362 
es セレ クタ を 使っ て 要素 に アク セス する oon p.364 





LIE6 』Chrome 」 Safari 5 」 Firefox 4 ! Opera 11 1 iOS4 ] Android2 | WP 


=1 ヨ mlmIN に 1= 
将 定 の 名 前 を 持つ 要素 に アク セス する 


ここ で は 、 特定 の 名 前 を 持つ 要素 に アク セス する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttle>Sompte</t+t1e> 
<Scrtpt src="]s/sqmple.]S"></scrtpt> 
</head> 
<body> 
<h1> 名 前 を 指定 し て アク セス </h1> 
<formm> 


<P><tnput type="radio" name="game ">Gataxtaqn</p> 





<P><tnput type="radto" name="game ">Gataga</D> 
<P><1nput type="radto" name="game ">gapLuS</D> 
<P><tnput type="checkbox" ngme="gtype1">shoottng</pP> 
<P><tnput type="checkbox" ngme="gtype2">retattme</p> 





<P><tnput type="checkbox" name="gtype3">qdventure</p> 


<tnput type="submtt" vatue=" 送 信 "> 


AO コ ヨ エ コマ ロロ 


</formm> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.aqddEventListener("1oad"。 functton(){ 
// 指定 し た 名 前 を 持つ 要素 を 返す 
var ltst = document .getElementsByName( "game"): 
// 繰り 返し 処理 し 、 背景 色 を オレ ンジ 色 に する 
for(var 1= の : 1<ltst.1Length: 1++){ 
Itst[1] .parentNode . style .backgroundCotor = "orange": 


} 
}, faqtse): 
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m ヒロ TI 口 届 -1 ら 6 m 特定 の 名 前 を 持つ 要素 に アク セス する 


プラ ウザ で index.html を 表示 する と 、「name」 属 性 で 「game」 の 名 前 を 持つ ラジ オ ボ タ ン の 
背景 色 が オレ ンジ 色 に な り ま す 。 


名 前 を 指定 し て アク セス 



















名 前 を 指定 し て アク セス する に は 
「getElementsByName()」 メ ソ ッ ド を 使う 


多 前 を 指定 し て アク セス する に は 、「getElementsByName () 」 メ ノッ ド を 使い ます 。 
「 getElementsByName ()) 」 メ ソ ッ ド の パラ メー タ に は 、 名 前 を 文字 列 で 指定 し ます 。 こ 
の 名 前 は 、 要素 の 「name」 属 性 で 指定 し た 値 に な り ます 。 多く の 場合 、 入力 フォ ー ム 内 
の ラジ オ ボ タ ン な ど へ の アク セス に 利用 する こと が で きま す 。 

「getElementsByName() 」 メ ノッ ド は 、「document」 オ プ ジ ェ クト だ け で な く 、 他 の 妥 
素 を 基準 に し て 使う こと も で きま す 。 た と えば 、「document.getElementById(mam ). 
getElementsByName("pasopia ) 」 と する と 、 ID 名 が 「main」 の 要素 内 の | name」 属 
性 が 「pasopial だ けが 対象 に な り ま す 。 


INI コ HImII に RI 





OO EE に ETE に 42s に 


抽 計 還 』 三 邊 用 2 


e 特定 の ID 名 を 持つ 要素 に アク セス する … IT p.356 
e 特定 の スタ イル シー トク ラス を 持つ 要素 に アク セス する …… ぐ "mmm p.358 
e 要素 名 を 指定 し て アク セス する … roo p.360 
e セレ クタ を 使っ て 要素 に アク セス する ……… ド ire p.364 
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LIE6 上 Chrome 1 Safari 5 | Firefox 4 1 Opera 11 1 iOS4 [ Android2 IwP 


GE JNNM-1 5 プ 


セレ クタ を 使っ て 要素 に アク セス する 








ここ で は 、 セレ クタ を 使っ て 要素 に アク セス する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<heqd> 
<metg charset="utf-8"> 
<tttle>Sqmple</t1t1le> 
<Scrtpt src="]S/sqmple . Ss"></scrtpt> 
</hegd> 
<body> 
<h1> セ レク タタ を 使っ て アク セス </h1> 
<ul 1d="mz"> 
<li><spgn> 項 目 1</span></11> 
<li> 項 目 2</1i> 
<lt> 項 目 3</11> 
</ul> 





<dtv claqss="note "> 





<ul> 
<t> サ ブ 項 目 1</11> 
<ti> サ ブ 項 目 2</1> 
</ul> 
</d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventLtstener("1ogd"。 function(){ 
// 1i 要 素 に アク セス 
vagr ele = document.querySetector( "nz 11"): 
// 最初 の 文字 の 色 を 赤色 に する 
ele.ftrstChttd.styte.color = "red": 
// note ク ラス 内 の 1i 項 目 に アク セス 
var Itst = document.querySetectorAL1C".note 11") 
// 繰り 返し 処理 し 、 背景 色 を オレ ンジ 色 に する 


forCvar 1= の ・ 1<ltst. length: 1++){ 


AO0 有 EEEK2 ミ ma 


Itst[t] .style .backgroundCotor = "orgnge": 


} 
}, foalse): 
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gm 司 ビ ロ TI ロ NN!- 1 うら ワ mW セレ クタ を 使っ て 要素 に アク セス する 


ブラ ウザ で index.html を 表示 する と 、「note」 ク ラス 内 の 「i」 項 目 の 育 景色 が オレ ンジ 色 に な 
り ま す 。 








「querySelector()」 「querySelectorAllI()」 メソッド を 使う 
セレ クタ を 使っ て 要素 に アク セス する に は 、「querySelector() 」 メ ノッ ド 、 また は 、| query 
SelectorAll() 」 メ ノッ ド を 使い ます 。 どちら の メソ ッ ド も パラ メー タ に CSS セ レク タ を 指定 し ます 。 
「querySelector() 」 メ ノッ ド は 、 見 つか っ た 最初 の 要素 を 返し ます 。 該当 する 要素 が 
な い 場 合 は 、「null」 を 返し ます 。 
[querySelectorAll() 」 メ ソノ ッ ド は 、 該当 する 要素 を すべ て 配列 と し て 返し ます 。 
[querySelector() 」 メソ ッ ド と 「querySelectorAll() 」 メソ ノッ ド は 、| document」 オブ 
ジェ クト だ け で な く 、 他 の 要素 を 基 進 に し て 使う こと も で きま す 。 た と えば 、| document. 
getElementById('main ).querySelectorAll(.turbo ) 」 と する と 、D 名 が 「mam」 の 
要素 内 の 「turbo」 ク ラス が すべ て ピッ クア ッ プ され ます 。 














OO に ET に 4ge 


関連 項目 ょ ゅ 


e 特定 の ID 名 を 持つ 要素 に アク セス する ee p.356 
e 特定 の スタ イル シー トク ラス を 持つ 要素 に アク セス する …… パ (ror p.358 
e 要素 名 を 指定 し て アク セス する … oon p.360 
e 特定 の 名 前 を 持つ 要素 に アク セス する oo D.362 


365 


LIE6 1 Chrome 』 Safari 5 | Firefox 4 1 Opera 11 | iOS 4 I Android2 1WP」 


ら 5 ら EDUDTIUHN-15 ロ 


要素 を 生成 する 


ここ で は 、 要素 を 生成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<meta charset="utf-8"> 
<tttle>Sqmplte</t1tle> 
<SCrtDpt Src="]S/sqmpte.]S"></scrtpt> 
</head> 
<body> 
<h1> 要 素 を 生成 する </h1> 
<d1V></d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .aqddEventLtstener("toad" 。functton(){ 
// tmg 要 素 を 生成 
Var myTmage = document.createEtement("1mg"): 
// 属性 (プロ パテ ィ ) を 設定 


myImage .STC = "1mages/sqmplte.]Pg": 





OO に EE に 4 ミ Se 


myImage .w1dth = 2409: 

myImage .hetght = 1609: 

// dv 要素 の 末尾 に 追加 

document.getEtementsByTagName("dtv") う [9] .oppendCht1LdCmyImage): 
}+, fgqtse): 


プラ ウザ で index.html を 表示 する と 、| img」 要素 が 生成 され 、「 div」 要素 の 末尾 に 追加 さ 
れ ま す 。 また 、 追加 後に ペー ジ 上 に 画像 が 表示 され ます 。 


を 和正 


要素 を 生成 する 
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生 王 ビ ヒロ TI 口 N!-15 ら 日 mw 要素 を 生成 する 


eN 呈 sim 下 要素 を 生成 する に は 「document.createElement()」 メソ ッ ド を 使う 


DOM で 要素 を 生成 する に は 、「document.createElement() 」 メ ノッ ド を 使い ます 。 
「documentcreateElement () | の パラ メー タ に は 、 要素 名 を 指定 し ます 。 要素 名 は 大 
文字 、 小文字 を 問い ませ ん 。 

要素 を 生成 し た だ け で は ペー ジ 上 に は 表示 され ませ ん 。「appendChild ()) 」 メ ソ ッ ド な 
ど を 使っ て 、 ペー ジ 上 の DOM 要 素 に 追加 する 必要 が あり ます 。 







関連 項目 pl 


@ テキ スト ノー ド を 生成 する 00 おす せり が りや Y ザ サツマ す て ダバ ミチ いじ て きま くい トル て だ p.368 
@ ゾー ド な を 追加 ・ 控 入 する p.374 





AOOU SETIWEE に 4 は 
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LIE6 』Chrome 1 Safari 5 』 Firefox 4 1 Opera 11 1 iOS4 I Android2 1 WP 


=1 ヨ mMlmIN 委 に に 
テキ スト ノー ド を 生成 する 


ここ で は 、 テキ スト ノー ド を 生成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq Charset="utf-8"> 
<t1tte>Sample</t1t1e> 
<SCrtpt src="]s/saqmpte.]S"></scrtpt> 
</head> 
<body> 
<h1> テ キス トノ ー ド を 生成 する </h1> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oqgd" 。 functton(){ 
// テキ スト ノー ド を 生成 


Var text1 = document.createTextNode("DOM Sqmpte"): 





AO ココ ヨ ュ コマ ロロ 


Var' textZ = document.createTextNode("Sqmpte text"): 

// ペー ジ の 末尾 に 追加 

document.body .qppendChttdCtext1): 

// p 要 素 の 末尾 に 追加 

document.getEtLementsByTagName("p")[9] .qppendCht1dCtext2): 
}, fqlse): 


ブラ ウザ で index.html を 表示 する と 、 テキ スト ノー ド が 生成 され 、 それ ぞ れ 、「body」 要 素 の 
末尾 と | p」 要 素 の 末尾 に 追加 きれ ます 。 





テキ スト ノー ド を 生成 する 


Sample text 








DOIM Sarmple 
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間 司 ビ ピロ 丁 | 口 N! - 1 うら 9 mw テキ スト ノー ド を 生成 する 


テキ スト ノー ド を 生成 する に は 


mliMMM document.createTextNode()」 メ ソ ッ ド を 使う 


DOM で テキ スト ノー ド を 生成 する に は 、「 document.createTextNode() 」 メ ノッ ド を 使 


いま す 。「 documentcreateTextNode() 」 の パラ メー タ に は 文字 列 を 指定 し ます 。 


テキ スト ノー ド を 生成 し た だ け で は ペー ジ 上 に は 表示 され ませ ん 。 ノー ド と し て 生成 され 
る の で 、|appendChild ) 」 メ ノッ ド な ど を 使っ て 、 ペー ジ 上 に ある DOM 有 要素 に 追加 や 挿 
人 する 必要 が あり ます 。 


関連 項目 ょ ゅ 





@ 要素 を 生成 する Py サ サ 和 すやすや や の D.366 
ノー ド 友 追加 4 挿 人 する な 4 ザ る ま せ な 2 は 31400 人 D.374 





AO EEFITEE に 4 ミド 
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LIE6 』 Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS 4 Android2 1 WP 」 


BE じじ TIHN-16 ロ 


子 プ ー ド に アク セス する 








ここ で は 、 子 ノ ー ド に アク セス する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charse キ ="utf-8"> 
<tttte>Sqmpte</t1tle> 
<SCrtDpt src="]s/sample.]s"></scrtpt> 
</head> 
<body> 
<h1> 子 ノー ド に アク セス する </h1> 
<ul><lt>1 番 目 </11> 
<lt>2 番 目 </11> 
<li>3 番 目 </11> 
<lt>4 番 目 </1i> 
<li>5 番 目 </11> 
<li>6 番 目 </11> 
<lt>7 番 目 </L1></u1> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . qddEventListener( "togd" 。 functton(){ 
// ul 要素 を 取得 
Var myLtst = document.getEtementsByTagName( "ul ")[9]: 
// 最初 の ノー ド の 文字 色 を 変更 
myLtst.ftrstChttd.style.color = "red": 
// 3 番目 の ノー ド の 背景 色 を 変更 
myLtst.chttdNodes[4] .style .backgroundColor = "yeltow": 
// 最後 の ノー ド の スタ イル を 変更 
myLtst. lastChtld.style.fontStze = "18pt": 

+, false): 





OO EEtEEW 
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m ビ ピロ TI 品 NN-16 口 m 子 ノ ー ド に アク セス する 


ブラ ウザ で index.html を 表示 する と 、「ul」 要素 の 子 ノ ー ド に アク セス し 、 それ ぞ れ の 項目 の 
スタ イル が 変更 され ます 。 


子 ノ ー ド に アク セス する に は 
m 員 記 MMl [firstChild」 childNodes」 「lastChild」 プロ パテ ィ を 使う 


子 ノ ー ド に アク セス する に は 、 次 の いずれ か の プロ パテ ィ を 使い ます 。 


プロ パテ ィ / ノ ー ド リス ト (配列 ) 
最初 の 子 ノ ー ド 
childNodes [順番 ] 指定 し た 順番 の 子 ノー ド (最初 の ノー ド は 0 番目 ) 
lastChild 
ノー ド の 順番 は 、 ブラ ウザ に よっ て 異な り ま す 。 IE6 一 8 で は HTML 有 要素 内 に 空白 な ど 
が ある と 、 IE9 以 降 や 他 の ブラ ウザ と は 異な っ た 結果 に な っ て し まう こと が あり ます 。 





関連 項目 ゅ l 
e 前 後 の ノー ド や 親 ノ ー ド に アク セス する …… ド ドド ドド oo D.37 ら 
e 子 ノー ド を 削除 ・ 置 換 する io p.376 
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LIE6 』Chrome 1 Safari 5 | Firefox 4 1 Opera11 | iOS4 1 Android2 WP」 


ョ ED TI1HN-161 


前 後 の ノ ー ド や 親 ノ ー ド に アク セス する 








ここ で は 、 前 後 の ノ ー ド や 親 ノ クー ド に アク セス する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<title>SqmpLe</tttte> 
<SCPtDt src="]S/sample.]S "></sCrtpt> 
</head> 
<body> 
<ht> 前 後 の ノ ー ド 、 親 ノー ド に アク セス する </h1> 
<ul><li>1 番 目 </11><li>2 番 目 </Li><1i>3 番 目 </11><1i>4 番 目 </Li></u1> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 

wtndow. gddEventLtstener("1ogd" 。 functton(){ 
// ul 要素 を 取得 
Var myLtst = document.getELementsByTagName( "ul ")[9] : 
// 最初 の 子 ノ ー ド の 次 の ノー ド の 背景 色 を 変更 
myLtst.ftrstChtld.nextStbltng.style .bockgroundCotor = "yettow": 
// 最後 の 子 ノ ー ド の 前 の ノー ド の 背景 色 を 変更 
myLtst.tqstChtld.prevtousStbltng.style .backgroundCotor = "orgnge": 
// 親 ノ ー ド に アク セス 
myLtst.ftrstChtld.parentNode . style.border = "1px solid red": 

}, fgqtlse): 


ブラ ウザ で index.html を 表示 する と 、 最初 の ノー ド の 後ろ の 項目 の 背景 色 と 最後 の ノー ド 
の 前 の 項目 の 育 景色 が 変更 され 、 さら に 親 ノー ド で ある 「l] 要素 に 赤 枠 が 表示 され ます 。 


前 後 の ノ ー ド 、 親 ノ ー ド に 
アク セス する 


ーー 番 上 ーーーーーーーーーー 


| 





還 王 ピ T| 口 N-1 ら 1] mW 前後 の ノー ド や 親 ノ ー ド に アク セス する 


前後 の ノー ド に アク セス する に は 「nextSibling」 「previousSibling」 
プロ パテ ィ 、 親 ノ ー ド に アク セス する に は 「parentNode」 プロ バテ ィ を 使う 


前 後 の ノ ー ド 、 お よび 、 親 ノ ー ド に アク セス する に は 、 次 の プロ パテ ィ を 使い ます 。 


説明 
nextSibling 
previousSibling 


ノー ド の 順番 は 、 プラ ウザ に よっ て 異な り ま す 。 IE6 一 8 で は HTML 要 素 内 に 空白 な ど 
が ある と 、 IE9 以 降 や 他 の プラ ウザ と は 異な っ た 結果 に な っ て し まう こと が あり ます 。 次 の 
URL を 参照 し て くだ さい 。 

http://blogs.msdn.Com/D/ie_jp/archive/201 1/10/03/ 





10219055.asDx 
関連 項目 
e 子 ノ ー ド に アク セス する に rr 0p.370 
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LIE6 』Chrome Safari 5 | Firefox 4 』 Opera11 1 iOS4 1 Android2 !WP_ 





=1 コ malmINBI= レ 
ノー ド を 追加 ・ 挿 入 す る 


DOM に は 要素 の 末尾 に 追加 する メソ ッ ド と 、 要素 の 前 に 挿入 する メソ ッ ド が 用 意 さ れ て い 
ます 。 ここ で は 、 ノ ー ド を 追加 ・ 挿 入 す る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 


<meta charset="utf-8"> 





<tttle>SqmpLe</t1t1le> 
<SCrtDt Src="]Ss/sample.]S"></scrtpt> 
</head> 
<body> 
<hi> ノ ー ド を 追加 / 挿 入 す る </h1> 
<ul><lt>1 番 目 </11></u1> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oad" 。 functton(){ 
// ut 要素 を 取得 
var myLtst = document.getElementsByTagName( "ul ")[9] : 
// リス ト 項 目 を 5 つ 追 加 
for(Cvar 1=Z2: 1<7: 和 ++){ 
(functton(){ 
// 新規 に 1 要素 を 作成 
Var myTtem = document.createElement("11"): 
// テキ スト ノー ド を 追加 
var myText = document.createTextNode(i+" 番 目 の 項目 "): 
// li 要素 に 作成 し た テキ スト ノー ド を 追加 
myItem .qppendCht1dCmyText): 
// 子 ノ ー ド と し て ti 要素 を 追加 
myLtst .qppendCht1d(CmyTtem): 
})( う : 
} 
}, false): 


al ヨコ マロ ロ | 
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思 呈 ビ ピロ 丁 | 口 N! -16 2 mw ノー ド を 追加 ・ 挿 入 す る 


プラ ウザ で index.html を 表示 する と 、「ji」 要素 と 、 その子 ノー ド で ある 文字 が 追加 され ます 。 
追加 され た 項 肥 に は 、「 一 の 項目 」 と いう 文字 が 付加 され て いま す 。 


ノー ド を 追加 挿入 する 


。 1 番目 

・ 2 番目 の 項目 
・ 3 番目 の 項目 
・ 4 番目 の 項目 
。 3 番目 の 項目 
・ 6 番目 の 1 項目 


ノー ド を 追加 する に は 「appendChild))」 メ ソ ッ ド 、 
mM 挿入 する に は 「insertBefore()」 メソッド を 使う 


ノー ド を 追加 ・ 挿 人 する に は 、 次 の メソ ッ ド を 使い ます 。 
D 


appendChild(node) 子 ノー ド を 追加 する 
insertBefore (node, pos) 基準 ノー ド の 前 に 挿入 する 





ノー ド の 順番 は 、 プラ ウザ に よっ て 異な り ま す 。 IE6-8 で は HTML 要 素 内 に 空白 な ど 
が ある と 、 IE9 以 降 や 他 の プラ ウザ と は 異な っ た 結果 に な っ て し まう こと が あり ます 。 





OO EE に に FI に 4 ミロ 





関連 項目 ゅ ' 


@ 要素 を 生 成す る 2 学生 e は 信人 池宮 20 の 信人 が 2 の 人 の 生 きる の D. 3③66 
e テキ スト ノー ド を 生成 する 生涯 人 人 の 人 の ん た る 本 たすき ACCA p.368 
@ 子 ノ ー ド を 削除 。 置換 する 生か ル を だ PC で ント サイ イア ヤ トリイ し ト で メサ て て 1 そく チル アイ トル て も くい YY I p.376 
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LIE6 』Chrome 1 Safari 5 | Firefox 4 | Opera11 1 iOS4 I Android2 】WP_ 


=1 コ =RImINBRI= に 
子 ノ ー ド を 削除 ・ 置 換 す る 


ここ で は 、 子 ノー ド を 削除 ・ 置 換 す る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<t1tle>Sampte</tttle> 
<SCrtpt src="]S/sample .]S"></sCcrtpt> 
</heqd> 
<body> 
<h1> 子 ノー ド を 削除 置換 する </h1> 
<ut><li>1 番 目 </li><tit>2 番 目 </1i><ti>3 番 目 </1i><lt>4 番 目 </1i></u1> 
<form> 
<tnput type="button" id="detBtn" vglue=" 最 後 の ノ ー ド を 削除 "> 
<tnput type="button" 1d="repBtn" vaqlue=" 乱 数 値 に 置換 "> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oqgd" functton(){ 

// 削除 ボタ ン に イベ ント を 割り 当て 

document.getElementById("delBtn").qddEventLtstener("click"。 functton(){ 
// ul 要素 を 取得 
Var myLtst = document.getElLementsByTagNqme( "ul ")[9] : 
// 最後 の ノー ド を 削除 。 削除 し た ノー ド を 変数 に 代入 (使用 は し な い ) 
var oldCht1ld = myLtst.removeCht1dCmyList.1qstCht1d): 

}, fatse): 

// 置換 ボタ ン に イベ ント を 割り 当て 

document . getEtementById("repBtn").qddEventListener("cLtck", functton(){ 
// ul 要素 を 取得 
Var myLtst = document.getElementsByTqgName( "ul ")[9] : 
// 整数 の 乱数 値 を 求め る (32btt 範 囲 ) 
Var text = document.createTextNode((Math. random() * 19999) | @): 
// ti 要素 を 作成 
var ttem = document.cregteEtement( "11"): 
ttem.appendCht1d(text): 
// 最後 の ノー ド を 置換 。 置換 前 の ノー ド を 変数 に 代入 (使用 は し な い ) 
Var repNode = myLtst.replaceChtldCitem,myList.1qstChi1d): 

}。 fqlse): 

}, faqlse): 


還 局 ビ ロ 丁 | 口 N! - 16 コ m 子 ノ ー ド を 削除 ・ 置 換 す る 


ブラ ウザ で index.html を 表示 し 、「 最後 の ノー ド を 削除 」 ボ タン を クリ ッ ク す る と 、 最後 の [1」 
項目 が 削除 され ます 。 


| 子 ノ ー ド を 削除 置換 する 


TI 





| 子 ノー ド を 削除 置換 


。 1 番目 
・ 2 番目 
・ 2531 


0 EEFISE42 ミ Fe 





子 ノ ー ド を 削除 する に は 「removeChild()」 メ ソ ッ ド 、 
ml 置換 する に は 「replaceChild() 」 メ ソ ッ ド を 使う 


子 ノー ド を 削除 置換 す る に は 、 次 の メソ ッ ド を 使い ます 。 


removeChild(node) 子 ノ ー ド を 削除 する 
replaceChild (node, pos) 子 ノー ド を 置換 する 


ノー ド の 順番 は 、 ブラ ウザ に よっ て 異な り ま す 。 IE6 一 8 で は HTML 有 要素 内 に 空白 な ど 
が ある と 、 IE9 以 降 や 他 の プラ ウザ と は 異な っ た 結末 に な っ て し まう こと が あり ます 。 





関連 項目 ゅ 


3 要素 を 生成 する 生やす 本 7 和泊 a D.366 
@ テキ スト ノー ド を 生成 する 6 基 18: れ 小生 江本 昭夫 D.368 
@ ノー ド を 追加 * 挿入 する 生か が お 6 な の 9! 人 の 科 計 人 0 も. 生 9 は の 0 代入 和光 0 D.374 
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LIE6 』 Chrome 』 Safari 5 Firefox 4 』 Opera11 1 iOS4 | Android2 1WP_ 


BEUTIHN-16 人 す 4 


ノー ド の 内 容 に アク セス する 








ここ で は 、 ノー ド の 内 容 に アク セス する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<title>Sqmple</tttte> 
<SCrtDt src="]S/sample.]S "></scrtpt> 
</head> 
<body> 
<h1> ノ ー ド の 内 容 に アク セス する </h1> 
<ul><li>1 番 目 </1i><lt>2 番 目 </1i><lt>3 番 目 </11><1i>4 番 目 </11></u1> 
< く DP> <OUtDu キ ></OutDu キ ></D> 





< く D> <OUtDu キ ></OUtDut></D> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventListener("1oqd"。 functton(){ 





OO EEPWEK2 ミ Sm 


var ele = document.getElementsByTagName( "output"): 
// ul 要素 を 取得 
Var myLtst = document.getElementsByTagName( "ul ")[9]: 
// 最初 の ノー ド に アク セス し て 読み 出す 
var val1 = myLtst.ftrstCht1d.ftrstChttd.nodeVatue : 
// 結果 を 出力 
ele[9] .innerHTML = "結果 :"+val1: 
// 最後 の ノー ド に アク セス し て 読み 出す 
Var val2 = myLtst.1astChitd.ftrstChi1d.nodeVatue: 
// 結果 を 出力 
ele[1] .innerHTML = "結果 :"+vgt2: 

}, faqlse): 


378 


生 呈 己 ロ TI ロ NI-16 4 mw ノー ド の 内 容 に アク セス する 


ブラ ウザ で index.html を 表示 する と 、 最初 と 最後 の ノー ド の 内 容 を 読み 出し た 結果 が 表示 
され ます 。 


INI コ IImII に 妥 


ノー ド の 内 容 に アク セス する に は 、|nodeValue」 プロパ ティ を 参照 し ます 。 [nodeValue」 


プロ パテ ィ は 、 読み 出す 要素 に よっ て 内 容 が 異な り ま す 。 


属性 





OO EE に 2 ミ は に 
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LIE6 』Chrome Safari 5 | Firefox 4 1 Opera 11 1 iOS4 [ Android2 1 WP 」 


5 ら EU じ TIHN-165 


腔 素 の 内 容 を 書き 換え る 








ここ で は 、 要素 の 内 容 を HTML デ ー タ 、 また は 、 テキ スト デー タ と し て 書き 換え る 方 法 に つ 
いて 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttle>Sqmple</tttLe> 
<SCrtDt Src="]s/sample .]S"></scrtpt> 
</head> 
<body> 
<h1> 内 容 を 書き 換え る </h1> 


<formm> 





<textagreg cols="49" rows="19">Sqgmpte <b>text</b> で す 。 
</textarea><hP> 
<tnput type="button" 1d="htmtBtn" vglue="tnnerHTML で 書き 換え "> 


<tnput type="button" 1d="textBtn" value="1nnerText/textContent で 書き 換え "> 
</form> 


< く OutDu キ ></OutDut> 


OO EE ま WEK4 ミ ma 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd" 。 functton(){ 

// tnnerHTML で 書き 換え ボタ ン に イベ ント を 割り 当て 

documert. getElementBy1d("htmtBtn").aqddEventLtstener("cltck"。functtonC){ 
// textarea 要 素 の 内 容 を 読み 出し 
Var text = document .getElementsByTagName("textareaq")[9] .value: 
// ペー ジ 上 に 出力 
document . getElementsByTagNgme( "output")[9] . tnnerHTML = text: 

}, faqlse): 

// tnnerText で 書き 換え ボタ ン に イベ ント を 割り 当て 

document .getElementById( "textBtn") .oddEventListener( "cltck", functton(){ 
// textarea 要 素 の 内 容 を 読み 出し 
var text = document.getElementsByTagName( "textarea")[9] .vatue: 
// ペー ジ 上 に 出力 。 Firefox の 場合 
var ele = document.getElLementsByTagName( "output")[9] : 
ele.textContent = text+"(Firefox)": 
// Ftrefox 以 外 の 場合 
ele.tnnerText = text: 

}, faqlse): 


380 


必 ビ ビ ロ T| 口 N!-16 ら 5 wm 要素 の 内 容 を 書き 換え る 


}。 faqtse): 4 


ブラ ウザ で index.html を 表示 し 、「innerHTML で 書き 換え 」 ボ タン を クリ ッ ク す る と 、 テキ スト 
エリ ア の 内 容 を HTML タ グ を 解釈 し て 表示 され ます 。 


内 容 を 書き 換え る 


に Cesoncs 和 Cm です 。 


| jnnetHTML で 書き 押え 」|. 


Sample text で す 。 








また 、「innerText/textContent で 書き 換え 」 ボ タン を クリ ッ ク す る と 、 テキ スト エリ ア の 内 容 
を HTML タ グ を 解釈 せ ず に 表示 され ます 。 


OU EE た IE に 4 ミ Se 


内 容 を 書き 換え る 


Samp1e <b>cext</b> で す 。 














3 素 の 内 容 を 書き 換え る に は 
「innerHTML」 プロ パテ ィ や 「innerText」 プロ パテ ィ を 使う 


要素 の 内 容 を 書き 換え る に は 、2 つ の 方 法 が あり ます 。 1 つ は HTML と し て 解釈 させ る 
場合 で 、[innerHTML」 プ ロ パ ティ に アク セス し ます 。 も う 1 つ は プレ ー ン テキ スト (標準 テキ 
スト ) と し て 解釈 させ る 場合 で 、| innerText」 プロ パテ ィ に アク セス し ます 。 た だ し 、 Firefox 
で は 、| innerText」 プ ロ パ ティ の 代わ り に 、| textContent]」 プ ロ パ ティ に アク セス し ます 。 

な お 、「innerHTML」 プロ パテ ィ や | innerText」 プロ パテ ィ 、| textContent」 プロ パ 
ティ は 書き 換え だ け で な く 、 要素 の 内 容 の 読み 出し を 行う こと も で きま す 。 
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LIE6 』Chrome ! Safari 5 | Firefox 4 1 Opera11 1 iOS4 」 Android2 | WP_ 


=1 ヨ FlmIN 生 『=1= 
属性 値 を 取得 ・ 設 定 する 


ここ で は 、 属性 値 を 取得 ・ 設 定 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metog charset="utf-8"> 
<t1tle>Sample</t1tle> 
<SCP1Dt Src="]S/Sqmple . ]S "></sCrtDpt> 
</hegd> 
<body> 
<ht> 属 性 値 を 読み 出す プ 設定 する </h1> 
<form> 
<textarea Cols="49" rows="5">Sqmpte</textarea><hr> 
<tnput type="button" 1d="getBtn" value=" 読 み 出し "> 





に <tnput type="button" 1d="setBtn" value=" 書 き 込 み "> 
1 </form> 
ー 

= 町 <OUtDut></OutDUut> 
れ 

</bod 
ロ アテ > 

p| 〇 </html> 


JavaScript の コー ド (sample.js) 


wtndow .qgddEventLtstener("load"。 functton(){ 

var ele = document .getElLementsByTagName( "output")[9]: 

// textareq 要 素 へ の 参照 を 変数 に 代入 

Var te = document .getEtementsByTagName( "textarea")[9] : 

// 読み 出し ボタ ン に イベ ント を 割り 当て 

document . getELementById("getBtn") .qddEventLtstener("clitck"。 functton(){ 
// textarea 要 素 の cots 属 性 を 読み 出し 
var val = te.getAttribute( "cots"): 


// ペー ジ 上 に 出力 
ele.tnnerHTML = val: 
}, fgqlse): 


// 書き 込み ボタ ン に イベ ント を 割り 当て 
document.getElLementById("setBtn") .qddEventLtstener("ctick"。functton(){ 
// textgreq 要 素 の cots 属 性 に 値 を 設定 
var Sstze = (Math.roandom() * 29) | 9 + 19: 
te . SetAttrtbute( "cols" stze): 
}, false): 
+, false): 
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還 ピロ T| 口 N-166 W 属性 値 を 取得 ・ 設 定 する 


ブラ ウザ で index.html を 表示 し 、| 読み 出し 」 ボ タン を クリ ッ ク す る と 、 テキ スト エリ ア の | cols」 
属性 の 値 を 読み 出し た 結果 が 表示 され ます 。 


ヨコ 


属性 値 を 読み 出す 設定 する 





Samp1e ォ 








また 、「 書き 込み 」 ボ タン を クリ ッ ク す る と 、 テキ スト エリ ア の 「cols」 属 性 に ラン ダム な 値 が 書き 
込ま れ 、 テキ スト エリ ア の 横幅 が 変わ り ま す 。 


ヨ 


属性 値 を 読み 出す 設定 する 


Samp1e っ 











本 界 博 還 必 性 値 を 取 得する に は 「getAttribute()」 メ ソ ッ ド 、 
設定 する に は 「setAttribute()」 メソッド を 使う 


要素 の 属性 値 を 取得 する (読み 出す ) に は 、| getAttribute() 」 メ ソ ッ ド を 使い ます 。 
パラ メー タ に は 取得 し た い 属 性 名 を 指定 し ます 。 

属性 に 値 を 設定 する 場合 は 、「setAttribute() 」 メ ソ ッ ド を 使い ます 。 最初 の パラ メー 
タ に 属性 名 を 文字 列 で 指定 し 、 2 番目 の パラ メー タ に 設定 値 を 指定 し ます 。 


品 m 画 日 N 細 5/E/ で の [class」 属性 


IE6/IE7 で は 、 | getAttribute(class )」 と し て も | class」 属 性 の 値 を 読み 出す こと が 
で きま せん 。 IE6/IE7 で は 、| getAttiribute( className ) 」 と する 必要 が あり ます 。 












0 EE に EK4S ミ me 
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LIE6 』Chrome Safari 5 」 Firefox 4 1 Opera 11 | iOS4 ! Android2 1 WP 


BEDUDTIUHN-16 プ 


属性 を 新規 作成 ・ 削 除 す る 


ここ で は 、 新規 に 属性 を 作成 し た り 、 削除 し た りす る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<rmmetg charset キ ="utf-8"> 
<tttle>Sampte</t1t1e> 
<SCrtDt src="]S/sqmple.]S"></scrtpt> 
</heqd> 
<body> 
<h1> 属 性 を 作成 する 削除 する </h1> 
<p> サ ンプ ル テ キ スト </p> 
<formW> 
<tnput type="button" id="createBtn" vaqtue="qtign 属 性 を 作成 "> 
<tnput type="button" 1d="deteteBtn" vqlue="align 属 性 を 削除 "> 


</form> 





</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("1ogd" 。 functton(){ 


OU EE きま 還 に 4 ミ e 


Var paragraph = documernt.getElementsByTqgName("p")[9]: 
// 作成 ボタ ン に イベ ント を 割り 当て 
document.getElementById("createBtn").qddEventLtstener("click"。functton(){ 
// qttgn 属 性 を 作成 
Var gttr = document.createAttrtbute( "align"): 
// qttgn 属 性 に right を 割り 当て 
qttr .nodeVatue = "right": 
// 段落 に 属性 を 設定 
paragraph . setAttrtbuteNode(qttr): 
+, fglse): 
// 削除 ボタ ン に イベ ント を 割り 当て 
document.getELementByTd("deleteBtn") .qddEventLtstener("cttck"。function(){ 
// tgltgn 属 性 を 削除 
Paragraph .removeAttrtbute( "align"): 
+。 faqtse): 
}。 faqtse): 
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避 王 ビ ピロ 丁 [| 口 N-167 m 属性 を 新規 作成 ・ 削 除 す る 


ブラ ウザ で index.html を 表示 し 、| align 属 性 を 作成 ] ボ タン を クリ ッ ク す る と 、「p」 要素 に 
「align」 属 性 が 設定 、 値 が | right」 に な り 、|「p」 要 素 内 の 文字 は 石 揃え に な り ま す 。 






属性 を 作成 する 削除 する 


サン プル テキ スト 






属性 を 作成 する 削除 する 


サン プル テキ スト 





ご 1 還 


また 、| align 属 性 を 削 科 赤 」 ボ タン を クリ ッ ク す る と |p] 要素 の |align]」 属 性 が 削除 きれ 、「p」 
要素 内 の 文字 は デフ ォ ル ト の 左 揃え に な り ま す 。 





AO EEEWEK に 4She 


属性 を 作成 する 削除 する 


サン ブル デキ スト 





春生 二 新規 に 属性 を 作成 する に は 「document.createAttribute()」 メ ソ ッ ド 、 
削除 する に は 「removeAttribute()」 メソ ッ ド を 使う 


新規 に 属性 を 作成 する に は 、「document.createAttribute () 」 メ ソ ッ ド を 使い ます 。 パ 
ラメ ー タ に は 作成 する 属性 名 を 文字 列 で 指定 し ます 。| document.createAttribute () 」 


は 作成 し た 属性 を オブ ジェ クト と し て 返し ます 。 属性 に 値 を 設定 する に は 、| nodeValue」 
プロ パテ イィ に アク セス し ます 。 

属性 を 削除 する に は 、 対象 と な る 要素 の | removeAttribute ()) 」 メ ソ ッ ド を 使い ます 。 
パラ メー タ に は 削除 する 属性 名 を 文字 列 で 指定 し ます 。 
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LIE6 』 Chrome 』 Safari 5 | Firefox 4 Opera 11 | iOS 4 1 Android2 ! WP 





=1 ゴ malaIN 加 『=1= 
ノー ド を 一 括 し て 追加 する 


ここ で は 、 複数 の ノー ド を 別 の DOM ツ リー 上 に 生成 し 、 最後 に ノー ド を 一 括 し て 追加 する 
方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto Charset="utf-8"> 
<tttle>Sqmple</t1tle> 
<SCPtDt Src="]S/Saqmple .]S"></scrtpt> 
</hegd> 
<body> 
<hih> ま と め て ノー ド を 追加 </h1> 
<d1tV></d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("togd" , functton(){ 
var paragraph = document.getEtementsByTagName( "div")[9] : 
// 別 領 域 の OOM ツ リー を 生成 (ドキ ュ メ ント フラ グ メ ント ) 
var docf = document .createDocumentFragment(): 
// 繰り 返し ノー ド を 追加 する 
for(var ]=1: ]<199: ]+){ 
forCvar 1=1: 1<499: 1++){ 
// テキ スト ノー ド 生 成 
var text = document.createTextNode((1*])+"。 "): 
// 別 領域 の DOM に 追加 (プラ ウザ に 表示 され て いな い DOM) 
docf . qppendChttd(text): 
} 
// 改行 コー ド を 追加 
docf . gppendChtld(document.createEtement("br")): 
} 
// 最後 に プラ ウザ 上 の ドキ ュ メ ント に 表示 
paragraph . appendCht1ldCdocf ): 
},。 foalse): 





AOCO に EE ま EE に:4 ミ 
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加 選 ビ ビ ロ T エ | ロ トト! -16 日 mW ノー ド を 一 括 し て 追加 する 


ブラ ウザ で index.html を 表示 する と 、 別 の DOM ツ リー に ノー ド を 生成 し 、 最後 に まとめ て 
ペー ジ 上 に 追加 され ます 。 


68.69.70.71.7 
84. 85.86. 87. 88. 89.90.91. 92.93.94. 95. 96. 97. 98. 99. 


100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 
112.113.114.115.116.117.118. 119.120. 121. 122. 123. 
124. 125. 126. 127. 128. 129. 130. 131. 132. 133. 134. 135. 





5 ド を 一 括 し て 追加 する に は 「 documentcreateDocumentFragment()」 
メソ ッ ド を 使っ て 他 の DOM ツ リー を 用 意 す る 


TavaScript で は 、 他 の DOM ツ リー を 用 意 し て 、 ノー ド を 一 括 し て 追加 する こと が で 
きま す 。 ブラ ウザ 上 に 表示 され て いる DOM ツ リー と は 別に 作成 する に は 、| document 
createDocumentFragment() 」 メ ソ ッ ド を 使い ます 。 これ に より 、 プラ ウザ に 表示 され て 
いる DOM ツ リー と は 切り 離さ て ん た DOM ツ リー が 生成 され ます 。 この DOM ツ リー は ペー 
ジ 上 に 表示 され て いる 要素 に 追加 し な い 限 り 、 表示 され る こと は あり ませ ん 。 

[document.createDocumentFragment() 」 メ ソ ッ ド は 生成 し た 新た な DOM ツ リー 
を 返し ます 。 これ が (ドキ ュ メ ント ) ルー ト に な り ま す 。 あと は 、DOM を 操作 する メソ ッ ド を 使っ 
て ノー ド の 追加 、 削除 な ど を 行い ます 。 

ペー ジ 上 に 表示 する に は 、 ペー ジ 上 に ある 要素 に 対し て | appendChild 0)) 」 メ ソ ッ ド 
な ど を 使っ て 追加 し ます 。「appendChild () 」 メ ソ ッ ド は 追加 と いう 形 に な っ て いま す が 、 
「document.createDocumentFragment() 」 メ ソ ッ ド に よっ て 生成 し た ノー ド は ブラ ウ 
ザ の ドキ ュ メ ント 上 に 移動 する 形 に な り ま す 。 


mm 中 IINI 識 ノー ド を 追加 する 際 の 速度 に つい て 


一 括 し て ノー ド を 追加 し た 方 が 速い よう に 思え ます が 、 実際 に 計測 し て みる と 効果 が 
上 が ら な か っ た り 、 か えっ て 速度 が 低下 し て し まう こと が あり ます 。 




















OO に EEPIEE に 4 ミ Se 
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5E ヒ (1HN-1669 


Shadow DOM と し て 要素 を 追加 する 








ここ で は 、 通常 の DOM ツ リー と は 切り 離さ れ た Shadow DOM と し て 要素 を 追加 する 方 法 
に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 


<tttle>Sample</t1t1e> 








<Style> 
b { color: red: } 
</style> 
<SCPtDt Src="]S/sample.]S"></scrtpt> 
</head> 
ロ <body> 
い <h1>Shadow DOM</h1> 
r <div> 通 常 の <b>DOM ツ リー</b></div> 
M <div 1d="host"></dtv> 
画 </body> 
思 </html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd" , function(){ 
// Shqdow DOM の ホス ト と な る 要素 を 読み 出し 
var shagdowHost = document.getEtementById( "host"): 
// Shqdow DOM の ルー ト を 指定 
vor shgdowRoot = new WebKitShagdowRoot(shadowHost): 
// p 要 素 を 作成 
var PD = document.creaqteElement("p"): 
P.1nnerHTML = "<b>Test</b> (Shadow DOM)": 
// Shadow_DOM に 追加 
shadowRoot.qppendCht tdCp): 
// p 要 素 を 作成 
P = document.createEtement("Dp"): 
p.tnnerHTML = "<b>Test</b> (通常 の DOOM ツ リー)": 
// 通常 の DOM ツ リー に 追加 
document . body .qppendCht1ldCp): 
+。 faqtse): 
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還 王 ロイ TI 口 N!-1 ら 59 mw Shadow DOM と し て 要素 を 追加 する 


ブラ ウザ で index.html を 表示 し 、 ペー ジ 内 に Shadow DOM と し て 段落 を 追加 し て 、 その 
後 、 通常 の DOM に も 段落 を 追加 し ます 。 Shadow DOM と し て 追加 し た 要素 は 通常 の DOM 
ツリ ー と は 切り 離さ れ て いる た め 、 CSS が 適用 され ませ ん 。 





Shadow DOM 


通常 の DOM ソ リー 
Test (Shadow DOM) 
Test (通常 の DOM ソ リー) 


Shadow DOM は ペー ジ 上 に は 表示 され ます が 、 通常 の DOM ツ リー と は 切り 離さ れ て 
いま す 。 この た め 、 スタ イル シー ト が 適用 され ませ ん 。 また 、 通常 の DOM ツ リー で の アク セ 
ス か ら る も 切り 離さ れん てい ます (カプ セル 化 さ れ て いる )。 

この Shadow DOM と し て 要素 を 追加 する に は 、「new WebKitShadowRoot( 」 と し 
て Shadow DOM の ルー ト を 作成 し ます (2012 年 8 月 時 点 で は ベン ダー プレ フィ ックス を 付 
ける 必要 が ある ) 。 パラ メー タ に は 、 Shadow DOM の ルー ト と な る 有 要素 を 指定 し ます 。 こ 
れ は 、 通常 の DOM ツ リー に ある 要素 を 指定 する こと に な り ま す 。 
作成 し た Shadow DOM は 、 一 般 的 な DOM 処 理 を 行う メソ ッ ド な ど を 使っ て 、 要素 を 

追加 し た り 、 削除 し た りす る こと が で きま す 。 


miml 問 日 に 細 較 (hrTOmB で の 設定 


Google Chrome 21 で は 標準 で Shadow DOM が 動作 し ませ ん 。 Shadow DOM 
を 動作 させ る に は 、 アド レス バー に [| about:Hags」 と 入力 し 、 表示 され る 設定 画面 で 
「Shadow DOM を 有効 に する 」 の 項目 で 機能 する よう に 設定 を 行い ます 。 
















関連 項目 ょ ゅ 
な 通常 の DOM ツ リー の 要素 を Shadow DOM[ に する Ke る.618 祝福 泊 流 人 (e: 59) あな D.390 
多 GhadOW DOM に ある 要素 に アク セス する に 科 ザ い や 2 てこ や サイ 7 や や で いく と て や る て ャ トペ ドサ D. づ 9 ど 





AO EEEIE に 4 ミド 
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BEUTIHN-1 ゲ プロ 


通常 の DOUM ツ リー の 要素 を 
ShadOw DUM に する 


ここ で は 、 通常 の DOM ツ リー の 要素 を Shadow DOM に する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meto charset="utf-8"> 
<tttle>SampLe</t1tt1e> 
<Style> 
11 { background-coltor: orangej wtdth: 399px: } 
</style> 
<SCr1Dt Src="]S/sqmple .]S "></Scrtpt> 
</head> 
<body> 
<h1>Shadow DOM</h1> 
<div> 通 常 の DOM ツ リー</div> 
<dtv 1d="host"></dtV> 
<ul 1d="menu"> 
<lt> 項 目 1</11> 
<lt> 項 目 2</11> 
<lt> 項 目 3</11> 
</ul> 
<form> 
<tnput type="button" vaqtue="Shadow DOM 側 に 連結 " 1d="conect"> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd" 。 functton(){ 





AO EE に 4 ミ ロロ 


document .getEtementById("conect").addEventListener("cltck",。functton(){ 
// Shadow DOM の ホス ト と な る 要素 を 読み 出し 
var shadowHost = document.getElementById( "host"): 
// Shgdow_ DOM の ルー ト を 指定 
var shadowRoot = new WebKitShadowRoot(shadowHost): 
// Shgdow DOM に 連結 する リス ト 項 目 
Var myLtst = document.getEtementById( "menu"): 
// Shadow DOM に 追加 
shadowRoot.gppendChtlLd(CmyLtst): 

}, false): 

}, false): 
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司 王 ビ ロイ TI 口 NN-1 プ ロ m 通常 の DOM ツ リー の 要素 を Shadow DOM に する 


ブラ ウザ で index.html を 表示 する と 。 リ スト 項目 は 通常 の DOM ツ リー と し て 存在 し て いま す 。 
この た め 、 CSS で 設定 し た 背景 色 が 反映 され て いま す 。 


Shadow DOM 


通常 の DOM ソ リー 





ボタ ン を クリ ッ ク す る と 、 通常 の DOM ツ リー か ら Shadow DOM 側 に 連結 され ます 。 これ に よ 
り 、 通常 の CSS は 反映 され な く な り 、 育 景 色 は デフ ォ ル ト ( 透 明 ) に な り ま す 。 


Shadow DOM 
通常 の DOM ソ リー 
e 」 自 日 1 


e 1 自 日 2 
* 」 和 日 3 


通常 の DOM ツ リー に 存在 する 要素 を Shadow DOM に する に は 、|new WebKit 

ShadowRoot() 」 と し て Shadow tomoeere キ ore パラ メー タ に は 、 ホ ス 
ト と な る 通常 の DOM 有 要素 を 指定 し ます 。 

次 に Shadow DOM の ルー ト の 「 appendChild 0 」 メ ソ ッ ド を 使っ て 、Shadow DOM に 

し た い 要 素 を パラ メー タ と し て 指定 し ます 。 これ で 、 通常 の DOM か ら Shadow DOM に 

要素 が 移動 し ます 。 この 時 点 で CSS な ど は 通常 の DOM か ら 切 り 離 され 、 反映 され な く な 

り ま す 。 TavaScript で の 通常 の DOM 要 素 の アク セス か ら も 切り 離さ れ ま す 。 












mml 画 BIN 較 (hrTOm ら で の 設定 


Google Chrome 21 で は 標準 で Shadow DOM が 動作 し ませ ん 。 Po が DOM 


を 動作 さき せ る に は 、 アド レス バー に [aboutiHags」 と 入力 し 、 表示 され る 設定 画面 で 
「Shadow DOM を 有効 に する 」 の 項目 で 機能 する よう に 設定 を 行い ます 。 





関連 項目 
@ ShadOW DOM と し て 要素 を 追加 する 和み 2 和信 人: D.388 
@ ShadOW DOM に ある 要素 に アク セス する 人 0 宮寺 沈め D.39 
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ロロ 


BEUD TIHN-171 


ShadOow DOM に ある 要素 に アク セス する 








ここ で は 、 Shadow DOM に ある 要素 に アク セス する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<Wmetq Charset="utf-8"> 
<t1tle>SqmpLte</t1t1e> 
<style> 
11 { bgckground-cotor: orgnge: wtdth: 399px: } 





</style> 
<SCrtDt Src="]S/sqmple.]S "></scrtDpt> 
</heqd> 
<body> 
さ <h3> 通 常 の DOM ツ リー</h3> 
エ <ul> 
ち 
1 <lt> 項 目 1</11> 
ミ ゴ 
= 幅 <lt> 項 目 2</11> 
- 人 し 
</ul> 
思 <h3>Shadow DOM ツ リ 一 </h3> 


<dtv 1d="host"></dtv> 

<ul 1d="menu"> 
<li> 項 目 1</11> 
<lt> 項 目 2</11> 
<lt> 項 目 3</11> 

</ul> 

<form> 
<tnput type="button" valtue="Shadow DOM に アク セス "id="setCSS"> 

</form> 

</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1ogd", function()}{ 
// Shadow DOM の ホス ト と な る 要素 を 読み 出し 
Var' shadowHost = document.getEtementById( "host"): 
// Shadow DOM の ルー ト を 指定 
Var shadowRoot = new WebKitShadowRoot(shadowHost): 
// Shadow DOM に 連結 する リス ト 項 目 
Var myLtst = document .getEtementById( "menu"): 
// Shqdow DOM に 追加 
shadowRoot . qppendCht1dCmyLtst): 
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// ボタン に イベ ント を 設定 | マ 」 
document . getELementById("setCSS").gddEventLtstener("cltck" functiton()t 
var 11 = shadowRoot.getEtementsByTagName(" 11"): 
1[9] .style.color = "white": 
tt[9@] .style .backgroundColor = "blagck": 
}, faqlse): 
+, fatse): 


ブラ ウザ で index.html を 表示 する と 、 2 つ 目 の リス ト が Shadow DOM と な っ て いま す 。 この 
た め 、 通常 の CSS は 反映 きれ て いま せん 。 


し Sample 
⑤ 





と っ うっ GQ 





通常 の DOM ツ リー 
・ 開陳 人 WNW 


Shadow DOM ツ リー 





OO EERIE に 4Se 


ボタ ン を クリ ッ ク す る と 、 Shadow DOM 側 に ある 最初 の リス ト 項目 の 文字 色 と 到 景 色 が 変化 
し まま っ 


Shadow DOM ツ リー 


Rn 


2 
* 日 3 


Shadow DOM に ある 要素 に アク セス する に は 
呈 DOM 関 連 の メソ ッ ド を 使う 


Shadow DOM の ルー ト 要 素 を 基準 と し て DOM 関 連 の メソ ッ ド を 使う こと で 、 Shadow 
DOM に ある 要素 に アク セス する こと が で きま す 。 一 般 的 に は 、| document.getElements 
ByTagName() 」 の よう に 記述 する 部 分 の |「 document」 を Shadow DOM の ルー ト と な る 
要素 (オブ ジェ クト ) に し ます 。 つま り 、 基 進 と な る ルー ト 妥 素 を 変更 する だ け で よい こと に な 
り ま す 。 
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miml 両 邊 N 問 較 (hrTOITB で の 設定 


Google Chrome 21 で は 標準 で Shadow DOM が 動作 し ませ ん 。 Shadow DOM 
を 動作 させ る に は 、 アド レス バー に 「about:Hags」 と 入力 し 、 表示 され る 設定 画面 で 
| Shadow DOM を 有効 に する 」 の 項目 で 機能 する よう に 設定 を 行い ます 。 






皿 庄 事 和 三箇 注 4 


『] GhadOW DOM と し て 要素 を 追加 する ちの も せな ゃ あめ Wi を もせ 9 6 を の Wi4 朱 0 弧 00E 光 2 流 rs D.388 
F 】 通常 の DOM ツ リー の 要素 を Shadow DOM に する し おき 芝生 は 4 D.390 
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LIE6 』Chrome Safari 5 | Firefox 4 1 Opera 11 1 iOS4 | Android2 [WP_ 


= ココ mMlmlN 還 レル ン 
イベ ント ハン ドラ を 設定 する 


ここ で は 、 指定 し た 要素 に イベ ント ハン ドラ を 設定 する 方 法 に つい て 解説 し ます 。 
| HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
-4 <hegd> 
NM <metq Charset="utf-8"> 
<tttle>Sample</t1t1e> 
<Scrtpt src="]s/sample.]S"></scrtpt> 
</head> 
| <body> 
2 <hi>: イ ベン ト ハ ンド ラ を 設定 </h1> 
<ul> 
<It><q href="http://www.openspc2 .org/">1:0penSpace</g></11> 
rt <lt><q href="http://www.openspc2 .org/ ">2:0penSpace</q></11> 
| <ti><q href="http://Www.openspc2 .org/">3:0penSpace</g></11> 
an </ul> 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.ontogd = functton(){ 
// イベ ント を 設定 する 要素 を 読み 出し 
| var ele = document .getElementsByTagNgme( "qa"): 
の 0 // 最初 の o 要 素 に イベ ント ハン ドラ を 設定 
N | ele[9] .oncltck = ftGEtohCevt う T 
// クリ ッ ク 時 の 処理 
ょ | glert("[1] ク リッ ク し まし た り : 
// プラ ウザ の デフ ォ ル ト の イベ ント を 禁止 
ー evt . preventDefault( ): 
// イベ ント が 伝達 され る の を 禁止 
evt. stopPropagatton(): 
} 
// 2 番目 の ag 要素 に イベ ント ハン ドラ を 設定 
ele[1] .onctick = functtonCevt){ 
// クリ ッ ク 時 の 処理 
glert("[2] ク リッ ク し まし た "): 
} 
} 
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ブラ ウザ で index.html を 表示 し 、 最初 の リン ク を クリ ッ ク す る と 設定 し た イベ ント ハン ドラ が 実 
行 さ れ 、 ア ラー ト ダ イア ログ が 表示 され ます 。 プ ラウ ザ の デフ ォ ル ト の イベ ント を 禁止 し て いる た め 、 
リン ク 先 に 移動 せ ず 、 元 の 状態 に 戻り ます 。 





2 番目 の リン ク に も イベ ント ハン ドラ が 設定 され て お り 、 クリ ッ ク す る と アラ ー ト ダイ アロ グ が 表示 
され ます 。 た だ し 、 デフ ォ ル ト の イベ ント を 禁止 し て いな いた め 、 リ ンク 先 の ペー ジ に 移動 し ます 。 


2 Web W wwwopenspc2 org 
mOpenSpace 更 新 情報 (Biog) (サー バー 停止 な どの 場合 は 障害 必 
ーー で の 情報 1 


叙 [2] ク リッ ク し まし た 





7 ミタ を 笠 コ コ ヨコ マロ ロ 


mi 店 イベ ント ハン ドラ を 設定 する に は 要素 に 割り 当て られ た プロ バテ ィ を 使う 


要素 に は 、 イベント 発生 時 の 処理 を 設定 する こと が で きま す 。 処理 を 設定 する に は 
要素 の 特定 の プロ パテ ィ に イベ ント ハン ドラ (関数 ) を 指定 し ます 。 設 定 し た い イ ベン ト 名 が 
「 click」 な ら 、| onclick」 が 要素 に 割り 当て られ た プロ パテ ィ に な り ま す 。 

イベ ント ハン ドラ 内 の 処理 が 終わ る と 、 プラ ウザ の デフ ォ ル ト の イベ ント が 実行 され ます 。 
「 al 要素 で あれ ば 指定 し た リン ク 寺 に 移動 、 送信 ボタ ン で あれ ば フォ ー ム の デー タ を 送 
信 し ます 。 この よう な ブラ ウザ の デフ ォ ル ト の イベ ント を 実行 し た く な い 場 合 は 、 イベ ント オブ 
ジェ クト の | preventDefault ()) 」 メ ソ ッ ド を 使い ます (IE は バー ジョ ン 9 以 降 ) 。 また 、 イベ ン 
ト を 伝達 し た く な い 場 合 に は 、 イベ ント オブ ジェ クト の 「stopPropagation () 」 メソッド を 使 
いま す 。 

な お 、 すでに イベ ント ハン ドラ が 設定 され て いる 場合 、 新た に 設定 する と 既存 の 処理 
は 上 書き され て し まい ます 。 上 書き せ ず に イベ ント 処理 を 追加 し た い 場合 は 、 イベ ント リス 
ナー を 使い ます (398 ペ ー ジ 参照 ) 。 


関連 項目 ょ Il 


ぁ e イ ベン トリ スナ ー 即 設定 する 上 の 和 パ コー ドド ドド ドド ドド ドド ドー ドド ーー ツ p.398 
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GETL 1TN- 1 / 


イベ ント リス ナー を 設定 する 





ここ で は 、 指定 し た 要素 に イベ ント リス ナー を 設定 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<t1tle>SqmpLe</t1t1e> 
<SCrtDt src="]S/Ssample .]S"></sCrtDpt> 
</head> 
<body> 
<h1i> イ ベン トリ スナ ー を 設定 </h1> 
<Ul> 
<lt><a href="http://www.OpenSPC2 .org/">1:0penSpace</q></11> 
<Lt><q href="http://www.openSspc2 .org/">2:0penSpace</a></11> 
</ul> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oagd" 。functton(){ 
// イベ ント を 設定 する 要素 を 読み 出し 
var ele = document .getElLementsByTagName( "aq"): 
// 最初 の g 要 素 に イベ ント リス ナー を 設定 
ele[9] .addEventLtstener("clitck"。functton(Cevt){ 
// クリ ッ ク 時 の 処理 
gtert("[1] ク リッ ク し まし た "): 
// プラ ウザ の デフ ォ ル ト の イベ ント を 禁止 
evt.preventDefault( ): 
// イベ ント が 伝達 され る の を 禁止 
evt. stopPropagatton( ): 
}, false): 
// 最初 の q 要 素 に さら に イベ ント リス ナー を 設定 
ele[9] .addEventListener("clLitck"。 functtonCevt){ 
gtert(" さ ら に クリ ッ ク し まし た "): 
}。 false): 
+,。 false): 


LNTI 


IE6 一 B で イベ ント リス ナー を 設定 する 方 法 は 、 400 ペ ー ジ の COLUMN を 参照 し こく だ さい 。 





ナリ ソリュ 、 EE ま E に 4S 
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最初 の リン タク に は イベ ント リス ナー を 2 回 設定 され て いま す 。 ブラ ウザ で index.html を 表示 し 、 
最初 の リン ク を クリ ッ ク す る と 最初 に 設定 し た イベ ント 処理 が 行わ れ ま す 。 ここ で は ダイ アロ グ が 
表示 され ます 。 





> 自 
イベ ント リス ナー を 設定 ) 仙 、 中 クリ ッ ク し まし た 
1 し 」 





さら に 、 設定 し た 2 つめ の イベ ント 処理 が 行わ れ 、 ダイ アロ グ が 表示 され ます 。 


公 さら に クリ ッ ク し まし た 


oo 


イベ ント リス ナー を 設定 する に は 
mM 唐 addEventListener()」 メ ソ ッ ド を 使う 








要素 に は 、 イベ ント 発生 時 の 処理 を 設定 する こと が で きま す 。 有 要素 に 用 意 さ れ た 
「onclick」 な どの プロ パテ ィ に イベ ント 発生 時 の 処理 を 指定 する こと が で きま す が 、 多 
人 数 で の 開発 や ライ ブラ リ 使 用 時 に は 既存 の 処理 が 上 書き され て し まう こと が あり 、 問 
題 が 発生 する 可能 性 が 高く な り ま す 。 その よう な 場合 は イベ ント リス ナー を 使い ます 。 イベ 
ント リス ナー は 、 既存 の イベ ント ハン ドラ を 上 書き せ ず に 追加 し て いき ます 。 

イベ ント リス ナー は 、 要素 の 「addEventListener() 」 メ ソ ッ ド を 使っ て 行い ます 。 最初 
の パラ メー タ が イベ ント 名 に な り ま す 。 これ は | click」 で あれ ば [| click 」 の 文字 列 を 指定 
し ます 。 文字 列 の 先頭 に 「 on」 の 文字 を 付加 する 必要 は あり ませ ん 。 

2 番目 の パラ メー タ は 、 イ ベン ト ハ ンド ラ に な り ま す 。 イベ ント ハン ドラ に は 、 イ ベン ト オ プ ジェ 
クト が パラ メー タ と し て 渡さ れ ま す 。 

3 番目 の パラ メー タ は 、 イベ ント の 伝達 方 向 に な り ま す 。 | true」、 また は 、| false」 を 設 
定 し ます 。 Google Chrome や Safari、 Firefox で は 、 3 番目 の パラ メー タ は 省略 する こと 
が で きま す 。 

「addEventListener() 」 メ ソノ ッ ド に よっ て 追加 され た イベ ント リス ナー は 、 追加 し た 順 
番 に 実行 され て いき ます 。 

イベ ント が 発生 し イベ ント ハン ドラ 内 の 処理 が 終わ る と 、 プラ ウザ の デフ ォ ル ト の イベ ント 
が 実行 され ます 。 「a」 要 素 で あれ ば 指定 し た リン ク 先 に 移動 、 送 信 ボ タン で あれ ば フォ ー 
ム の デー タ を 送信 し ます 。 この よう な ブラ ウザ の デフ ォ ル ト の イベ ント を 実行 し た く な い 場 合 





399 





ナ \M\ メ に SSFa 


400 





mm 避 ETIHN-17 ヨ mw イベ ント リス ナー を 設定 する 


は 、 イベ ント オブ ジェ クト の | preventDefault()) 」 メ ノッ ド を 使い ます (IE は バー ジョ ン 9 以 
隆 )。 ま た 、 イ ベン ト を 伝達 し た く な い 場 合 は 、 イ ベン ト オ ブ ジェ クト の 「stopPropagation () 」 
メソ ッ ド を 使い ます 。 


| addEventListener() 」 メ ノッ ド に よっ て 追加 きれ た イベ ント を 削除 する に は 、「remove 
EventListener () 」 メ ソ ッ ド を 使い ます 。 削除 する 場合 、「addEventListener() 」 で 設定 
し た イベ ント 名 、 イベ ント ハン ドラ 、 伝達 方 向 が 一 致し て いる 必要 が あり ます 。 


mm 同 8 還 較 上 5ーB で イベ ント リス ナー を 設定 する に は 


IE6-8 で イベ ント リス ナー を 設定 する に は 、| attachEvent() 」 メ ソ ッ ド を 使い ます 。 最 
初 の パラ メー タ に イベ ント 名 を 指定 し ます が 、 先頭 に 「on」 の 文字 を 付加 する 必要 が あり 
ます 。 つま り 、| click」 イベ ント な ら 「| onclick」 と いう 文字 列 を 指定 し ます 。 2 番 肌 に は イベ ン 
ト ハ ンド ラ を 設定 し ます 。 な お 、|「addEventListener() 」 メ ノッ ド と 異な り 、 3 番目 の パラ メー 
タ ( イ ベン ト の 伝達 方 向 ) は あり ませ ん 。 また 、 設定 し た イベ ント リス ナー を 削除 する に は 、 
| detachEvent() 」 メ ソ ッ ド を 使い ます 。 

プラ ウザ の デフ ォ ル トイ ベン ト の 動作 を 禁止 する 場合 は 、|「eventreturnValue」 プロ パ 
ティ に | false」 を 設定 し ます 。 イベ ント の 伝達 を 禁止 する に は 、「event.cancelBubble」 プ ロ 
パテ ィ に [| true」 を 設定 し ます 。 サン プル を IE6-8 用 に 書き 換え る と 、 次 の よう に な り ま す 。 












wtndow. qttachEvent("ontoqd" , functton(){ 
// イベ ント を 設定 する 要素 を 読み 出し 
var ele = document.getElementsByTagName("q"): 
// 最初 の a 要 素 に イベ ント リス ナー を 設定 
ele[ の 9] .qttachEvent("onctitck" 。functton(){ 
// クリ ッ ク 時 の 処理 
glert("[1] ク リッ ク し まし た "): 
// プラ ウザ の デフ ォ ル ト の イベ ント を 禁止 
event.returnValue = false: 
// イベ ント が 伝達 され る の を 禁止 
evert .cancelBubble = true: 
}): 
// 最初 の 要素 に さら に イベ ント リス ナー を 設定 
ele[9] .gttachEventC("onclitck" functionCevt){ 
qtert(" さ ら に クリ ッ ク し まし た "): 
}): 
}): 


















関連 項目 ょ pl 
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LIE6 1 Chrome 』 Safari 5 1 Firefox 4 | Opera11 OS4 」 Android2 IWP_ 


ED じ TIHN-1 プ 7 谷 


押さ れ た キー を 調べ る 








ここ で は 、 押 され た キー を 調べ た り 、 特 殊 キ ー の 押下 状 馴 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>SampLe</t1tle> 
<SCrtpt src="]S/Sample .]S"></SCrtDt> 
</head> 
<body> 
<h1> キ ー 入 力 </h1> 
<p> 何 か キー を 押し て 下さ い </p> 
<OU も DU キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.j8) 


wtndow .qddEventLtstener( "toqd" 。 functton(){ 
var ele = document.getEtementsByTagName( "output")[9]: 
// bogy 要 素 に イベ ント リス ナー を 設定 
document . body . addEventLtstener("keydown" , functton(Cevt){ 
// 押さ れ た キー コー ド を 求め る 
var kc = evt.keyCode: 
// キー コー ド か ら 文 字 に 変換 
var str = Strtng.fromCharCode(kc): 
// 結果 を 出力 
ele.innerHTML = str+"( キ ー コ ー ド :"+kc+" う ": 
// 特殊 キー の 押下 状態 を チェ ッ ク 
var altKey = evt.altKey: 
var qltKeyLeft = evt.altLeft: 





7 きた 者 ヨロ コマ ロコ 


var qltKeyGraph = evt.qltGraphKey: 

var ctrlKey = evt.ctrlKey: 

var ctrlKeyLeft = evt.ctrlLeft: 

var shtftKey = evt.shiftKey: 

var shiftKeyLeft = evt.shtftLeft: 

var metaKey = evt.metaKey: 

// 結果 を 出力 

ele.1tnnerHTML += "<br>ALT キ ー:"+qltKey: 
ele.tnnerHTML += "<br> 左 ALT キ ー : "+qlLtKeyLeft: 
ele.innerHTML += "<br>ALT キ ー(2): "+qttKeyGraph: 
ele.tnnerHTML += "<br>ctr1 キ ー:"+ctrtKey: 
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ele.tnnerHTML += 
ele.1nnerHTML += 
ele.1tnnerHTML += 
ele.1nnerHTML += 
+,。fqlse): 
+ false): 


"<br> 左 ctrt1 キ ー : "+ctr1KeyLeft: 4 
"<br>Shtft キ ー : "+shiftKey: 

"<br> 左 Shift キ ー : "+shitftKeyLeft: 

"<br> メ タタ (特殊 ) キ ー : "+metakKey: 


プラ ウザ で index.html を 表示 し 、 キー ボー ド の キー を 押す と 、 押さ れ た キー の コー ド や 、 
Shift キ ー な ど 修 人 和 飾 キー な どの 押下 状態 が 表示 され ます 。 





NEP ロ INT 








テ ナ M グ に に EE に 4Sm 


キー 人 力 
何 か が か キ ー を 押し て 下さ い 


A( キ ー コ ー ド :65) 
ALT キ ー: galse 

左 ALT キ ー:undefined 
ALT キ ー(2):undefined 
cfri 寺 一 : 人 alse 

左 cgi 寺 一 : undefined 
Shi 駐 十 一 : rue 

左 ShifRt 十 一 : undefined 
メタ ( 特 殊 寺 一: falsc 





押さ ざれ た キー を 調べ る に は 「keyCode」 プロ パテ ィ や 
修飾 キ 一 専用 の プロ バテ ィ を 使う 


キー 人 力 に 関す る イベ ント は 、 次 の 3 つが あり ます 。 







キー が 離さ れ た と き 






押さ れ た キー を 調べ る に は 、 イベ ント オブ ジェ クト の 「keyCode」 プロパ ティ を 読み 出し ま 
す 。 | keyCode」 プ ロ パ ティ が 返す 値 は 「keypress」 イ ベン ト だ け 、「keydown | イベ ント と 
| keyup」 イ ベン ト と は 異な る 値 に な り ま す 。 

通常 の キー で は な く 、 Shift キ ー な どの 押下 状態 を 調べ る 場合 に は 、 次 の 表 の よう な 専 
用 の プロ パテ ィ を 読み 出し ます 。 これ ら の プロ パテ ィ は キー が 押さ れる と 「true」、 離 され る 
と | false] に な り ま す 。 た だ し 、 プラ ウザ や バー ジョ ン に よっ て 利用 で きる プロ パテ ィ が 異な 


り ま す 。 
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還 ビ ビ ロ T| 口 NN - 1 ワイ mw 押さ れ た キー を 調べ る 


左 の Shift キ ー 押 下 状態 (IE6 一 8) 
メタ キー (Mac の 場合 は コマ ンド キー) 











な お 、 IE、Google Chrome、 Safari で は 、 直接 、「 event」 オプ ジェ クト を 参照 する こと 
も で きま す 。 





スマ ー ト フォ ン で の キー 入力 


スマ ー ト フォ ン で は 、 ハー ド 的 に キー ボー ド が な い 端 末 が ほとん ど で す 。 この た め 、 パソ 
コン の キー ボー ド の よう に キー 入力 処理 を 行う こと は で きま せん 。 キー 入力 を 行う た め に 
は 、 テキ スト フィ ー ル ド な ど を 用 意 し 、 ソフ トウ ェ ア キ ー ボ ー ド を 利用 し て 入力 し て も ら う こと 
に な り ま す 。 

ijOS 5 で は 英語 キー ボー ド 表 示 の 場合 、 リ アル タイ ム に キー コー ド を 取得 する こと が で き 
ます 。 た だ し 、 日 本 語 キ ー ボ ー ド 表示 の 場合 、 キー コー ド は 「0」 に な り ま す 。 

Android で も ソフ トウ ェ ア キ ー ボ ー ド を 使っ て 人 力 さ れ た キー の 情報 を 取得 する こと が 
で きま す 。 Android も 英語 キー ボー ド 表 示 の 場合 、 リア ル タ イ ム に キー コー ド を 取得 で きま 
す が 、 日 本 語 キ ー ボ ー ド 表示 の 場合 は 何 も 返 し ませ ん (キー コー ド が 入ら な い ) 。 

Windows Phone(7.5) も 英語 キー ボー ド 表 示 の 場合 、 リア ル タ イ ム に キー コー ド を 取 
得 で きま す が 、 日 本 語 キ ー ボ ー ド 表示 の 場合 、 押し た キー と | keyCode」 プ ロ パ ティ で 返 
され る キー( 値 ) は 一 致し ませ ん (「 あ 」 が a、「 か 」 が b、「 さ 」 が c、「 た 」 が d に な る ) 。 















テ ナ M ソ グー に に に 28 
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=1 コ mMImIN 生 4 に 
イベ ント が 発生 し た 座標 を 求め る 


ここ で は 、 イベ ント が 発生 し た 座標 を 求め る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<mietq Charset="utf-8"> 
<tt せ le>Sqmp le</t1t1e> 
<SCr1Dpt Src="]S/sqmple.]S"></scrtpt> 
</head> 
<body> 
<ht> ク リッ ク し た 座標 値 を 表示 </h1> 
<p> ク リッ ク し て くだ さい </p> 
ぐ く OUtDu キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oad", functtion(){ 
// body 要 素 に イベ ント リス ナー を 設定 
wtndow.qddEventLtstener("clitck"。 coords, fatse): 
// h1 要 素 に イベ ント リス ナー を 設定 
var h1 = document.getElementsByTagName( "output")[9] : 





AA くき 光 を コロ ヨコ マロ ロ 


h1 .qddEventLtstener("cltck"。 coords, fatse): 
}, faqlse): 
// 座標 表示 
functton coordsCevt){ 
var ele = document.getELementsByTagName( "output ")[9] : 
// クラ イア ント 座標 を 求め る 
Var CX = evt.CltentX: 
Var Cy = evt.cltentY: 
// ペー ジ 座 標 を 求め る 
Var' DX = evt.pageX: 
Var Py = evt.pqgeY: 
// モニ タ 画 面 上 の 座標 を 求め る 
Var SX = evt.SCreenX: 
Var Sy = evt.SCreenY 
// オフ セッ ト 座 標 を 求め る 
Var OX = evt.OffsetX: 
Var Oy = evt.offsetY: 
// 結果 を 出力 


ele.1nnerHTML = "cttentX : "+cx+"<br>"・ 
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還 王 ビ ロ 丁 | 口 凡 -1 プ 5 mw イベ ント が 発生 し た 座標 を 求め る 


ele.innerHTML += "cltentY : "+Cy+"<Dr>": K4 
ele.innerHTML += "pageX : "+pPx+"<br>": 
ele.tnnerHTML += "pageY : "+Dy+"<br>"・: 


ele.innerHTML += "screenX : "+sx+"<Dbr>" 


ele.tnnerHTML += "screenY : "+Sy+"<br>": 
ele.innerHTML += "offsetX : "+Ox+"<Dr>") 
ele.1tnnerHTML += "offsetY : "+oy+"<br>" 
// イベ ント の 伝達 を 禁止 

evt . stopPropagqtton( ): 


に 


プラ ウザ で index.html を 表示 し 、 プラ ウザ の ウィ ンド ウ 内 を クリ ッ ク す る と 、 クリ ッ ク し た 場所 の 
座標 値 が 表示 され ます 。 


クリ ッ ク し た 座標 値 を 表示 
クリ ッ ク タレ て くだ さい 


chentX - 60 
clhentY - 46 
pageX - 60 
PageY - 46 
screenX - 476 
screenY - 232 
offsetX - 52 
offsetY - 25 





テア ME に ま 導 に 4 ミロ 


イベ ント が 発生 し た 座標 を 求め る に は 
「clientX」 プロ パテ ィ や 「clientY]」 プロ パテ ィ な ど を 使う 


イベ ント が 発生 する と 、 イベ ント オブ ジェ クト の 各 プ ロ パ ティ に 座標 値 が 格納 され ます 。 
求め る 座標 の 種類 に 応じ し て プ ロ パ ティ が 用 意 さ れ て いま す 。 座標 値 は すべ て ビク セル 値 
で 返さ れ ま す 。 


NIImII に MI 


ペー ジ 上 の Y 座 標 ( ス クロ ー ル 量 が 加算 され る ) 


要素 か ら の Y 座 標 オ フ セ ッ ト 
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9 所 EE」N-1 / 色 


発生 し た イベ ント の 種類 を 求め る 








ここ で は 、 発生 し た イベ ント の 種類 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metqg Charset="utf-8"> 
<tttlte>Sqmpte</ttt1e> 
<SCrtpt src="]S/sqmple.]s"></scrtpt> 
</heqd> 
<body> 
<h1> 発 生 し た イベ ント の 種類 </h1> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("togd" 。 functton(){ 
// body 要 素 の イベ ント を キャ プチ ャ ー 
documert . body . gddEventListener("cttck" , outputType, fatse): 





document . body . gddEventLitstener( "mousemove" , outputType, faqlse): 
}, false): 


// イベ ント の 種類 を 表示 
functton outputType(evt){ 


テ ナ \/ グ だま に 4 ミ ピ 


Var ele = document.getEtementsByTagName( "output")[@]: 
// イベ ント の 種類 を 求め る 

Var evtType = evt.tyDe: 

// イベ ント が 発生 し た 要素 

var evtEtelement = evt.tagrget.tagName : 

// 結果 を 出力 

ele.innerHTML = "種類 : "+evtType+"<br>": 
ele.tnnerHTML += "要素 : "+evtElelement+"<br>": 

// イベ ント の 伝達 を 禁止 

evt . StopPropagatton( ) : 
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ブラ ウザ で index.html を 表示 し 、 ペー ジ 上 に マウ ス を 移動 させ る か クリ ッ ク す る と 、 イベ ント 
の 種類 と 発生 し た タグ 名 が 表示 され ます 。 


発生 し た イベ ント の 種類 


種類 - click 


要素 : H1 





な お 、 プラ ウザ に よっ て は 、 画面 書き 換え の タイ ミン グ や 処理 速度 が 速 す ぎる た め に 、 種類 
の と ころ に [click」 が 表示 され な い 場 合 が あり ます 。 その 場合 は 、| consolelog) 」 メ ノッ ド を 
使っ て 変数 [evtType」 を 出力 する と 、「click」 イ ベン ト が 発生 し て いる こと を 確認 で きま す (346 


Go 7 フナ 
ペー ジ 参 照 ) O 














= 上 slSm 画 発生 し た イベ ント の 種類 を 求め る に は 「type」 プロ バテ ィ を 使う 


発生 し た イベ ント の 種類 を 求め る に は 、 イベ ント オブ ジェ クト の 「 type」 プ ロ パ ティ を 参照 
し ます 。 また 、「target」 プロパ ティ に は イベ ント が 発生 し た 要素 へ の 参照 が 人 人 っ て いる た 
め 、 要素 名 や 要素 その も の を 操作 する こと も で きま す 。 

な お 、 発生 し た イベ ント に 応じ て 処理 を 振り 分 ける こと も で きま す 。 主 な イベ ント は 、 次 
の 表 の よう に な り ま す 。 






























ケム AX 少 宇 コロ ヨ コマ ロロ 
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LIE6 』Chrome 1 Safari 5 」 Firefox4 」 


LTN- メガ 


マウ スホイ ー ル の 値 を 取得 する 








ここ で は 、 マウ スホイ ー ル の 値 を 取得 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<t1tle>SqmpLe</t1t1e> 
<SCrtpt src="]S/sample.]S"></scrtpt> 
</hegd> 
<body> 
<hi> マ ウス ホイ ー ル の 値 </h1> 
<OUtDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.gddEventLtstener("1ogd"。 function(){ 

var ele = document .getEtementsByTagName( "output ")[9] : 

// body 要 素 の イベ ント を キャ プチ ャ ー 

document .body . addEventListener( "mousewhee1l " functtonCevt){ 
// 回 転 量 を 求め る 
var deltg = evt.wheelDetta: 
var deltaX = evt.wheelDeltgaX: 
var deltaY = evt.wheelDeltaY: 
// 結果 を 出力 
ete.innerHTML = "ホイ ー ル 量 : "+delto+"<br>": 
ele.tnnerHTML += "ホイ ー ル 量 X : "+dettoX+"<br>": 
ete.tnnerHTML += "ホイ ー ル 量 Y : "+deltoY: 

}, faqtse): 

documert.body .gddEventLtstener("DOMMouseScrot1", functtonCevt){ 
// 回 転 量 を 求め る 


Var detatl = evt.detatl: 





AA きた コ ヨ エ コマ ロロ 


Var qX1S = evt.qxtS: 
// 結果 を 出力 
etle.tnnerHTML = "ホイ ー ル 量 : "+detaqil+"<br>": 
ele.tnnerHTML += "方 向 : "+qxts: 
+。 foqlse): 
}, false): 


ブラ ウザ で index.html を 表示 する と 、 ペー ジ 上 に マウ スホイ ー ル の 回 転 量 が 表示 され ます 。 
IE9 で は 、 回 転 量 の み が わ か り ま す 。 
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| マウ スホイ ー ル の 値 


ホイ ー ル 量 - -120 
ホイ ー ル 量 双 - sndefined 
ホイ ー ル 量 Y - undefined 





Firefox の 場合 は 、 回 転 量 と 、 縦 方 向 、 横 方 向 ど ちら に 回 転 し た の か も わか り ま す 。 


の か イー 人 


ホイ ー ル 量 : -3 
方 向 : 2 





Google Chrome や Safari で は 、 回 転 量 と 、 左 右 の 回 転 量 が それ ぞ れ 別 の プロ パテ ィ に 人 っ 
て いま す 。 


> 
1| マウ スホイ ー ル の 値 


ホイ ー ル 量 : -120 
ホイ ー ル 量 双 : 0 
ホイ ー ル 量 Y : -120 





二 還 較 界 生還 マウ スホイ ー ル の 値 を 取得 する に は 「mousewhee|」 イ ベン ト や 
「DOMMouseScroll」 イベ ント を 検知 する 


Firefox 以 外 で 、 マウ スホイ ー ル の 値 を 取得 する に は 、|mousewheel」 イ ベン ト を 検知 
し ます 。 ホイ ー ル が どの 程度 、 回 転 し た の か は 、 イベ ント ハン ドラ に 渡る れる イベ ント オプ 
ジェ クト の | delta」 プ ロ パ ティ に 人 入り ます 。 

Firefox で は 、 マウ スホイ ー ル が 回 転 す る と 、「DOMMouseScroll」 イ ベン ト が 発生 し ま 
す 。 ホイ ー ル の 回 転 量 は 、 イベ ント オプ ジェ クト の | detail] プロパ ティ に 人 入り ます 。 

IE で は 回 転 量 し か わか り ま せん が 、 Firefox で は 縦 方 向 、 横 方 向 ど ちら に 回 転 し た か 
を 示す [axis | プロパティ が あり ます 。 また 、 Google Chrome や Safari な どの WebKit 系 
で は 、 縦 方 向 と 横 方 向 の 回 転 量 は 、 別々 の プロ パテ ィ に 入り ます 。 

な お 、 ブラ ウザ に よっ て は スク ロー ル 可 能 な 状態 で な いと 値 が 取得 で き な い 場合 が あり 
ます 。 













関連 項目 ょ ゅ 


@ トラ ッ ク / バド の 移動 量 を 求め る 天山 の SW: な 生ま 仙人 人情 ゆ の の.e: る 民 の W.: 析 生玉 を 信条 D.4 ] () 





テリ ソ グ ユ 、 EEEE:4 ミ に 
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ニ 1 = 間 是 個 時 有 還 IE By4 ニ 
トラ ッ ク バ ッ ド の 移動 量 を 求め る 


ここ で は 、 下 ラッ ク バ パッ ド の 移動 量 を 求め る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta Charset="utf-8"> 
<tttle>Sqgmple</ttt1e> 
<SCrtDt Src="]s/saqmple . ]S "></scrtpt> 
</head> 
<body> 
<h1> ト ラッ ク パ ッ ド の 移動 量 </h1> 
< く OutDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. aqddEventLtstener("1oqd"。 function(){ 
var ele = document.getElementsByTagName( "output")[9] : 
// boqy 要 素 の イベ ント を キャ プチ ャ ー 
document.body .qddEventLtstener( "MozMousePtxelScrol1", functton(evt){ 
// 移動 量 を 求め る 


var detatl = evt.detogt1 : 





AA きめ 定 笠 ココ ヨコ マロ ロ 


Var QX1S = evt.qx1S: 
// 結果 を 出力 
ete.tnnerHTML = "移動 量 : "+detail+"<br>": 
ele.innerHTML += "方 向 : "+qxts: 
}, false): 
+,。 faqlse): 


ブラ ウザ で index.html を 表示 し 、 ト ラッ ク バ パッ ド を 使っ て 2 本 指 で スク ロー ル さ せ た 場 合 に 、 
移動 量 と 方 向 が 表示 され ます 。 








トラ ッ ク パ ッ ド の 移動 量 


移動 量 : 36 
方 向 : 1 
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還 呈 ビ ヒロ 丁 | 口 届 -1 ワ 日 mW トラ ッ ク パ ッ ド の 移動 量 を 求め る 

















トラ ッ ク パ ッ ド の 移動 量 を 求め る に は 
「MozMousePixelIScrall] イベ ント を 検知 する 
トラ ッ ク パ ッ ド の 移動 量 を 求め る に は 、「MozMousePixelScroll」 イ ベン ト を 検知 し ます 。 
トラ ッ ク バ パッ ド で どの 程度 、 移動 きせ た の か は 、 イ ベン ト ハ ンド ラ に 渡 き れる イベ ント オプ ジェ 
クト の 「 delta 」 プロ パテ ィ に 人 人 り ま す 。 
トラ ッ ク パ ッ ド で 縦 方 向 に 2 本 指 を 動か し た の か 、 横 方 向 に 動か し た の か は 、 イベ ント オ 
プ ジ ェ クト の 「axis | プロ パテ ィ に 入り ます 。「axis」 プロパ ティ の 値 は 、 次 の よう に な り ま す 。 


横 方 向 の 場合 
縦 方 向 の 場合 


miml 画 IN マウ スホイ ー ル と の 関係 


「MozMousePixelScroll」 イベ ント は 、 ト ラッ ク パ ッ ド だ け で な く 、 マウ スホイ ー ル の 値 が 
変化 し た 場合 で も 発生 し ます 。 この 場合 で も 、「detail]」 プ ロ パ ティ に 移動 量 、| axis」 ブ プロ 
パテ ィ に 移動 方 向 が 人 り ま す 。 


ICEIPII に IE 



















7 きめ を 者 ヨコ マロ ロ 





関連 項目 ょ ゅ 
e マウ スホイ ー ル の 値 を 取得 する …… ドド oo p.408 
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さと 守 衝 ココ ヨコ マロ ロ 
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LIE6 Chrome Safari 5 』 Firefox 4 1Opera11 | iO5S4 】 Android2 IWP_ 


BEUTIHN-1 ワ 9 


フォ ー カ ス し た 隊 に 処理 を 行う 








ここ で は 、 フォ ー カ ス し た 際 に 処理 を 行う 方 法 と フォ ー カ ス が 外れ た 場合 に 処理 を 行う 方 法 
に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 


<reto Charset="utf-8"> 


<tttle>Sampte</ttt1e> 

<SCrtPt src="]s/sample.]s "></scrtpt> 
</head> 
<body> 

<h1h> フ ォ ー カ ス 処 理 </h1> 

<formm> 


名 前 :<tnput type="text" value="KF" 1d="uName"><br> 
年 齢 :<tnput type="text" value="18" 1d="uAge"> 
</form> 
<Out て Dut></OutDut> 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. aqddEventListener("1oad"。 functton(){ 
Var ele = document.getElementsByTagName( "output")[9]: 
// 最初 の テキ スト フィ ー ル ド に フォ ー カ ス 
var ftld1 = document.getEtementBy1Td("uName"): 
fld1.focus(): 
// さら に 選択 。 その 旨 メ ッ セ ー ジ を 表示 
fld1.select( ): 
ele.innerHTML = "最初 の テ チキ スト フィ ー ル ド に フォ ー カ ス し 選択 し まし た ": 
// 2 番目 の テキ スト フィ ー ル ド に フォ ー カ ス し た 場合 の 処理 
var fldZ = document .getElLementBy1IdC("uAge"): 
ftd2.qgddEventLtstener("focus", functtonCevt){ 
var targetID = evt.target.1d: 
etle.innerHTML = “TID 名 :"+tqrgetID+" の フィ ー ル ド に フォ ー カ ス し まし た ": 
}, faqlse): 
// 2 番目 の テキ スト フィ ー ル ド の フォ ー カ ス が 外れ た 場合 の 処理 
fldZ.qddEventLtstener("blur", functtonCevt){ 
ete.tnnerHTML = "フォ ー カ ス が 外れ まし た ": 
},。 fatse): 
}, false): 


和 mm 己 ロ 丁 | 口 N-1 ワ mm フォ ー カ ス し た 際 に 処理 を 行う 


ブラ ウザ で index.html を 表示 し 、 ペー ジ が 読み 込ま れる と 、 最初 の フィ ー ル ド に フォ ー カ ス が 
移っ て 内 容 が 選択 され ます 。 


フォ ー カ ス 処 理 





名 前 : 皿 
年 前 : 18 
最初 の テキ スト フィ ー ル ド に フォ ー カ スレ し 選択 し まし た 





2 番目 の フィ ー ル ド に フォ ー カ ス を 移す と 、 フ ォ ー カ ス が され た こと を 示す 文字 が 表示 され ます 。 


フォ ー カ ガス 第 


名 前 :KF 
年 齢 : 18 
D 名 :wAge の フィ ー ル ド に フォ ー カ スレ し まし た 





フォ ー カ ス が 外れ る と 、 フォ ー カ ス が 外れ た こと を 示す 文字 が 表示 され ます 。 





フォ ー カ ス 処 理 


吉本:MF 
年 全 : 18 
フォ ー カ ス が 外れ まし た 


ナ \M グ っ に ま に 4 ミ | 





フォ ー カ ス に 関す る 処理 を 行う に は 
[focus] イベ ント や 「blur」 イベ ント を 使う 


ブラ ウザ に は フォ ー カ ス を 扱う メソ ッ ド が いく つか 用 意 さ れ て いま す 。 特定 の テキ スト 
フィ ー ル ド に フォ ー カ ス を 移す 場合 は 、| focus ) 」 メ ソ ッ ド を 使い ます 。 テキ スト フィ ー ル ド 
場合 、 入 力 済み の 文字 を 選択 状態 に し た い の で あれ ば 、「focus() 」 メ ノッ ド に 続け て 


ロロ NEPUINT 


Pe ) 」 メ ソ ッ ド を 呼び 出し ます 。 

テキ スト フィ ー ル ド な ど に フォ ー カ ス さ れる と 、| focus」 イ ベン ト が 発生 し ます 。 逆 に フォ ー 
カス が 外れ る と 、| blur」 イ ベン ト が 発生 し ます 。 イベ ント 発生 時 に 処理 を 行う 場合 は 、 イ 
ベン トリ スナ ー な ど を 使っ て イベ ント ハン ドラ を 設定 し ます 。 イベ ント ハン ドラ に は イベ ント オプ 
ジェ クト が 渡さ れる の で 、 イ ベン ト が 発生 し た 要素 に 対し て 何 か 処 理 を 行う こと も で きま す 。 





関連 項目 ょ ゅ 


e フォ ー ム 要素 の フォ ー カ ス を 設定 する ……l デ ーー ドド ドド omomoeormeemn p.323 
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LIE6 』 Chrome Safari 5 | Firefox 4 1 Opera11 | iOS4 」 Android2 1 WP 


=1 ヨ ゴ mlglmlNaI=1m 
クリ ッ ク 時 / ダ ブル クリ ッ ク 時 の 処理 を 行う 


ここ で は 、 クリ ッ ク 時 、 お よび 、 ダブ ルク リッ ク 時 の 処理 を 行う 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metqg charset="utf-8"> 
<tttle>SampLe</t1t1e> 
<ltnk rel="stylesheet" href="css/mgtn.Ccss "> 
<SCrtDt Src="]S/sample.]S "></Scrtpt> 

</head> 

<body> 
<hih> ク リッ クイ ベン ト </h1> 
<div> ク リッ ク し て くだ さい </div> 
<OuUtDU キ ></OutDut> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("togd" 。functton(){ 





var ele = document.getEtementsByTagName( "output")[9] : 

// div 要 素 へ の 参照 を 変数 に 代入 

Var myArea = document.getEtementsByTagName( "ditv") う [9] : 

// クリ ッ ク イ ベン ト を 割り 当て 

myAreq .qddEventLtstener("cLitck"。 functiton(evt){ 
ele.itnnerHTML = "クリ ッ ク し まし た ": 
evt .target. style .backgroundCotor = "yellow": 

}, false): 

// ダブ ルク リッ クイ ベン ト を 割り 当て 

myArea . qaddEventLtstener("dblclick"。function(Cevt){ 
ete.tnnerHTML = "ダブ ルク リッ ク し まし た ": 

}, false): 

}, faqlse): 


AA く タ を 和幸 ココ ヨコ マロ ロ 
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還 ビビ ロ T| 口 NN - 1 日 口 m クリ ッ ク 時 / ダ ブル クリ ッ ク 時 の 処理 を 行う 


プラ ウザ で index.html を 表示 し 、 画面 内 の 四角 い 領 域 を クリ ッ ク す る と 、 クリ ッ ク し た こと を 
示す メッ セー ジ が 表示 され 、 背景 色 が 黄色 に 変わ り ます 。 





画面 内 の 四角 い 領 域 を ダブ グル クリック す る と 、 ダブ ルク リッ ク し た こと を 示す メッ セー ジ が 表示 





され ます 。 


ご ] 還 


ナリ ハー EE に EE に 45a 





クリ ッ ク 時 に 処理 を 行う に は 「click」 イ ベン ト 、 
ダブ ルク リッ ク 時 に 処理 を 行う に は 「dblclick」 イ ベン ト を 捕捉 する 


クリ ッ ク 時 に 処理 を 行う に は 、「click」 イ ベン ト を 捕捉 し ます 。 イベ ント を 割り 当て る 要素 に 
対し て 、| onclick」 プロ パテ ィ に イベ ント ハン ドラ を 設定 する か 、| addEventListener()」 メ 


ロロ NEPHINT 


ソ ッ ド を 使っ て 設定 し ます 。 呼び 出さ れる イベ ント ハン ドラ に は 、 イベ ント オブジェ クト が 渡さ 
れ ま す 。 イベ ント オブ ジェ クト に は 、 イベ ント が 発生 し た 要素 の 情報 も 人 っ て いる た め 、 サン 
プル の よう に 要素 に 対し て 処理 を 行う こと も で きま す 。 

クリ ッ ク で な く 、 ダブ ルク リッ ク の 場合 は 、| dblclick」 イベント を 捕捉 し ます 。 
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LIE6 』 Chrome Safari 5 | Firefox 4 1 Opera 11 1 iOS 4 | Android2 WP」 


BEDUTIHN-1 日 1 


マウ ス オ ー バ ー 時 / マ ウス アウ ト 時 の 処理 を 
行う 
ここ で は 、 マウ ス オ ー バ ー 時 / マ ウス アウ ト 時 の 処理 を 行う 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 


<head> 








<meta charset="utf-8"> 
<tttte>SampLe</t1tle> 
<ltnk rel="stylesheet" href="css/matn.css"> 
<SCP1Pt Src="]S/sample .]S "></scrtDpt> 

</head> 

<body> 
<hi> マ ウス オー バー プア ウト イベ ント </h1> 
<div> マ ウス を 乗せ て くだ さい </div> 
< く OU て Du キ ></OU モ Dut> 

</body> 

</html> 


JavaScript の コー ド (sample.j5) 


wtndow.aqddEventLtstener("toad"。functton(){ 





var ele = document.getEtementsByTagName( "output")[9] : 

// dtv 要 素 へ の 参照 を 変数 に 代入 

Var myArea = documernt.getElLementsByTagName( "dtv")[9] : 

// マウ ス オ ー バ ー イ ベン ト を 割り 当て 

myAreg.qddEventLtstener( "mouseover",。 functtonCevt){ 
// 黄色 に 背景 色 を 変更 
evt .target.style.backgroundColor = "yeltow": 
ele.innerHTML = "マウ ス が 乗り まし た ": 

}。 false): 

// マウ ス ア ウト イベ ント を 割り 当て 

myArea.qddEventLtstener( "mouseout"。 functton(Cevt){ 
// 黄色 を 元 の 色 に 変更 
evt.target . style .backgroundColor = "#ffd592"・ 
ete.tnnerHTML = "マウ ス が 離れ まし た ": 

}, faqlse): 

}, fglse): 


AX2 を 者 コ ヨコ マロ ロロ 


ブラ ウザ で index.html を 表示 し 、 画面 内 の 四角 い 領 域 に マウ ス を 重ね る と 、 マウ ス が 乗っ 
た こと を 示す メッ セー ジ が 表示 され 、 背景 色 が 黄色 に 変わ り ま す 。 
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呈 局 ピロ 丁 | 口 山 -1 日 1 m マウ ス オ ー バ ー 時 / マ ウス アウ ト 時 の 処理 を 行う 





マウ ス が 離れ る と 、 マウ ス が 離れ た こと を 示す メッ セー ジ が 表示 され 、 背景 色 が 元 の 色 に 記 
り ま す 。 





7 和 き c 写 ヨコ マロ ロ 





な お 、 Windows Phone で は 、 タッ チ す る た びに マウ ス オ ー バ ー と マウ ス ア ウト が 切り 奉 わ り 
ます 。 


マウ ス ア ウト 時 の 処理 を 行う に は 「mouseout」 イベ ント を 捕捉 する 

マウ ス オ ー バ ー 時 に 処理 を 行う に は 、「mouseover」 イ ベン ト を 捕捉 し ます 。 イベ ント を 
割り 当て る 要素 に 対し て 、「onmouseover」 プ ロ パ ティ に イベ ント ハン ドラ を 設定 する か 、 
「addEventListener() 」 メ ソ ッ ド を 使っ て 設定 し ます 。 呼び 出さ れる イベ ント ハン ドラ に 
は 、 イベ ント オブ ジェ クト が 渡さ れ ま す 。 イベ ント オブ ジェ クト に は イベ ント が 発生 し た 要素 
の 情報 も 入っ て いる た め 、 サン プル の よう に 要素 に 対し て 処理 を 行う こと も で きま す 。 

マウ ス ア ウト 時 の 場合 は 、「 mouseout」 イ ベン ト を 捕捉 し ます 。 | mouseout」 イ ベン ト の 
場合 は 、 要素 の 「 onmouseout」 プロパ ティ に イベ ント ハン ドラ を 設定 する か 、| addEvent 
Listener () 」 メ ソ ッ ド を 使っ て 設定 し ます 。 
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Is] 開 L 


7 光二 和幸 コ ヨコ マロ ロ 
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LIE6 上 Chrome 1 Safari 5 | Firefox 4 』 Opera 11 』 iOS4 I Android2 1 WP_ 






= 間 時 着 半 因 有 NE 旧 ニ ジン CON 
マウ ス ダ ウ ン 時 / マ ウス アッ プ 時 の 処理 を 行う 


ここ で は 、 マウ ス ダ ウ ン 時 / マ ウス アッ プ 上 時 の 処理 を 行う 方 法 に つい て 解説 し ます 。 


HTML の コー ド ndexhtm) 


<!DOCTYPE html> 
<html> 
<head> 
<rmetq charset="utf-8"> 
<tttle>SqmpLe</tttte> 








<Ltnk rel="stylesheet" href="css/matn.css "> 
<SCrtPt Src="]S/sample .]S "></sCrtDt> 

</head> 

<body> 
<hi> マ ウス ダウ ンプ アッ プイ ベン ト </h1> 
<div> マ ウス ボタ ン を 押し て くだ さい </div> 
< く OUtDUt></OUtDut> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventListener("toagd", functton(){ 
Var ele = document.getElementsByTagName( "output") う [9]: 
// div 要 素 へ の 参照 を 変数 に 代入 
Var myAreq = document.getEtementsByTagName( "dtv")[9]: 
// マウ ス ダ ウ ン イ ベン ト を 割り 当て 
myArea . qddEventLtstener("mousedown" , functton(Cevt){ 
// 黄色 に 背景 色 を 変更 
evt .target. Style .backgroundColor = "yeltow": 
ete.tnnerHTML = "マウ スポ ボタ ン が 押さ れ ま し た ": 
}, faqlse): 
// マウ ス ア ッ プ イベ ント を 割り 当て 
myArea.qddEventLtstener("mouseup", functtonCevt){ 
// 黄色 を 元 の 色 に 変更 
evt.tqrget.style.backgroundCotor = "#ffd592"・ 
ele.innerHTML = "マウ スポ ボ タン が 離さ れ ま し た ": 
}, fatse): 
+,。fqlse): 


ブラ ウザ で index.html を 表示 し 、 画面 内 の 四角 い 領 域 で マウ ス の ボタ ン を 押す と 、 マウ ス 
ボタ ン が 押さ れ た こと を 示す メッ セー ジ が 表示 され 、 背景 色 が 黄色 に 変わ り ま す 。 


生 ビビ ロイ 丁 | 口内 - 1 日 2 m マウ ス ダ ウ ン 時 / マ ウス アッ プ 時 の 処理 を 行う 





マウ ス ボ タ ン が 離さ れる と 、 マウ ス ボ タ ン が 離さ れん た こと を 示す メッ セー ジ が 表示 され 、 背景 
色 が 元 の 色 に 戻り ます 。 





7 品 き 呈 衝 コ ヨ エコ マロ コロ 


な お 、 Windows Phone で は 、 マウ ス ア ッ プ 時 の イベ ント の み 取 得 で きま す 。 


寺本 ま 地 震 電 当 マウ ス ダ ウ ン 時 の 処理 を 行う に は 「mousedown」 イベント 、 
マウ ス ア ッ プ 時 の 処理 を 行う に は 「mouseup」 イ ベン ト を 捕捉 する 


マウ ス の ボタ ン が 押さ れ た (マウ ス ダ ウ ン ) と き の 処 理 を 行う に は 、| mousedown」 イ ベン 
ト を 捕捉 し ます 。 イベ ント を 割り 当て る 有 要素 に 対し て 、| onmousedown」 プ ロ パ ティ に イベ 
ント ハン ドラ を 設定 する か 、| addEventListener() 」 メ ソ ッ ド を 使っ て 設定 し ます 。 呼び 出 
され る イベ ント ハン ドラ に は 、 イベ ント オブ ジェ クト が 渡さ れ ま す 。 イベ ント オプ ジェ クト に は イ 


ベン ト が 発生 し た 要素 の 情報 も 人 っ て いる た め 、 サ ンプ ル の よう に 要素 に 対し て 処理 を 行 
うこ と も で きま す 。 

マウ ス の ボタ ン が 離さ れ た (マウ ス ア ッ プ ) と き の 処 理 を 行う に は 、「 mouseup」 イ ベン ト 
を 捕捉 し ます 。「mouseup」 イ ベン ト の 場合 は 、 要素 の | onmouseup」 プロパ ティ に イベ 
ント ハン ドラ を 設定 する か 、| addEventListener() 」 メ ソ ッ ド を 使っ て 設定 し ます 。 





関連 項目 ょ ゅ 


る マウ ス の 右 ボ タン が 押さ ざさ れ た と き に 処理 する を 芝生 本 才 が 学 3 0p.420 


419 


LIE6 Chrome 』 Safari 5 」 Firefox 4 』 Opera11 | iOS4 1 Android2 IWP_ 


ら E し 1N-1B 3 


マウ ス の 右 ポ タン が 押さ ざれ た と き に 処理 する 








ここ で は 、 マウ ス の 右 ボ タン が 押さ れ た と き に 処理 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<tttte>SampLe</t1t1le> 
<ltnk rel="stylesheet" href="css/matn.CSS"> 
<SCPrtDt Src="]S/Sample .]S "></SCrtDt> 
</hegd> 
<body> 
<h1> 右 ボタ ンク リッ ク 処 理 </h1> 
<div> マ ウス の 右 ボ タン を 押し て くだ さい </div> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sSample.jS) 


wtndow.addEventLtstener("toad" 。 functton(){ 





var ele = document.getELementsByTagName( "output")[9] : 

// div 要 素 へ の 参照 を 変数 に 代入 

var myArea = documernt.getElLementsByTagName( "dtv")[9] : 

// contextmenu イ ベン ト を 市 り 当 て 

myAreq .qddEventLtstener( "contextmenu" 。 functton(evt){ 
// 黄色 に 背景 色 を 変更 
evt.target.style .backgroundCotor = "yettow": 
ele.innerHTML = "マウ ス の 右 ボ タン が 押さ れ ま し た ": 
// デフ ォ ル ト の イベ ント を 禁止 
evt.preventDefault( ): 

}, faqlse): 

+, faqlse): 


AS 光二 和幸 ヨコ ヨ 上 コマ ロコ 
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m 王 ビ ビビ T| ロト! - 1 日 ヨコ m マウ ス の 右 ボ タン が 押さ れ た と き に 処理 する 


プラ ウザ で index.html を 表示 し 、 画面 内 の 四角 い 領 域 で マウ ス の 右 ボ タン を 押す と 、 マウ 
ス の 右 ボ タン が 押さ れ た こと を 示す メッ セー ジ が 表示 され 背景 色 が 黄色 に 変わ り ます 。 





マウ ス の 右 ボ タン が 押さ きれ た と き に 処理 する に は 、「contextmenu」 イ ベン ト を 捕捉 し ま 
す 。 イベ ント を 割り 当て る 要素 に 対し て 、「 oncontextmenu」 プ ロ パ ティ に イベ ント ハン ドラ 
を 設定 する か 、「addEventListener() 」 メ ソ ッ ド を 使っ て 設定 し ます 。 呼び 出さ れる イベ 
ント ハン ドラ に は 、 イベ ント オブ ジェ クト が 渡る され ま す 。 イベ ント オブ ジェ クト に は イベ ント が 発 
生 し た 要素 の 情報 も 人 っ て いる た め 、 サン プル の よう に 要素 に 対し て 処理 を 行う こと も で 
きま す 。 

「 contextmenu」 イ ベン ト 発 生 時 に 処理 を 行っ た 場合 、 プラ ウザ が 用 意 し て いる デフ ォ 
ルト の メニ ュー が 表示 され ます 。 これ を 防ぐ に は 、| oncontextmenu」 プ ロ パ ティ に イベ ン 
ト ハ ンド ラ を 割り 当て た 場合 、 処理 を 終わ ら せ る 際 に 「return false」 を 指定 し ます 。 イベ 

ント リス ナー を 設定 し た 場合 は 、 イベ ント オプ ジェ クト の 「preventDefault() 」 メ ソ ッ ド を 呼 
び 出 し ます 。 


miml 画 BN 了 較 WindOWS Phone の 場合 


Windows Phone で は 、 要素 に タッ チ し た 場合 で も | contextmenu」 イ ベン ト が 発生 し 
ます 。 
















関連 項目 ゅ 


あめ マウ ス ダ ウ ン 時 / マ ウス アッ プ 時 の 処理 を 行う 6) 0 D.4 ] 9 


AA く だき ヨコ コマ ロロ 
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ご ) 国 





LIE6 』Chrome 1 Safari 5 | Firefox 4 」 


っ 5EU TIHN-1 ロ 4 


カッ ト / コ ピー/ ペ ー ス ト さ れ た 際 に 処理 を 行う 








ここ で は 、 カッ ト / コ ピー/ ペ ー ス ト さ れ た 際 に 処理 を 行う 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>Saqmpte</tttte> 
<SCrtPt src="]S/saqmple.]S"></scrtpt> 
</head> 
<body> 
<hi> コ ピー プ カ ッ トブ プペ ー ス ト 処 理 </h1> 
<form> 
| <tnput type="text" vglue="sqmpte" 1d="myF1d"><br> 
] </for> 
| < く OU て Dut キ ></OUt て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener(C"1oad"。 function(){ 
var ele = document .getEtementsByTogName( "output")[ の ] : 
// テキ スト フィ ー ル ド の 参照 を 変数 に 代入 
var fld = document.getElementBy1d("myF1td"): 
pm // テキ スト フィ ー ル ド に copy イ ベン ト を 割り 当て 
Na fld.qddEventListener("copy", functtonCevt){ 
ele.tnnerHTML = "コピ ー し まし た 。 ": 
} す 。 faqlse): 
// テキ スト フィ ー ル ド に cut イ ベン ト を 割り 当て 
fld.gddEventListener("cut"。 functionCevt){ 
ele.innerHTML = "カッ ト し まし た 。 ": 
}, faqtse): 
// テキ スト フィ ー ル ド に pgset イ ベン ト を 割り 当て 
fld.qddEventListener("pgste" functionCevt){ 
ele.tnnerHTML = "ペー スト し まし た 。 ": 
}, faqtse): 
+, faqltse): 





7AA%2 宇 コ ヨ 1 コマ ロロ 
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還 王 ヒロ 丁 | 口 N-1 日 4 m カッ ト / コ ピー/ ペ ー ス ト さ れ た 際 に 処理 を 行う 


プラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド の 内 容 を コビー する と 、 コビー し た こと を 
示す 文字 が 表示 され ます 。 


ヨ 


| コピ ー プ カッ トペ ー ス ト 処 理 


sa 還 Me 
コピ ー し まし た 。 





テキ スト フィ ー ル ド の 内 容 を カッ ト す る と 、 カッ ト し た こと を 示す 文字 が 表示 され ます 。 


| コピ ー プ カッ トペ ー ス ト 処 理 


Sag 
カッ ト し まし た 。 





テキ スト フィ ー ル ド に ペー スト する と 、 ペー スト し た こと を 示す 文字 が 表示 され ます 。 


| コピ ー グ カッ トペ ー ス ト 処 理 | 


saempl 
ペー スト し まし た 。 









TE カッ ント ・ コ ピー・ ペー スト され た 際 に 処理 を 行う に は 
[copy」 イ ベン ト や 「paste」 イ ベン ト な ど を 補足 する 


カッ ト ・ コ ビー・ ペ ー ス ト さ れ た 際 に 処理 を 行う に は 、 次 に が す イベ ント を 捕 提 し ます 。 

















ペー スト (貼り 付け ) す る 前 





要素 で は 「oncopy」 の よう に 、「on」 を 付け た プロ パテ ィ に イベ ント ハン ドラ を 設定 で きま 
す 。 また 、「addEventListener() 」 メ ソ ッ ド を 使っ て イベ ント リス ナー で 設定 する こと も で き 
ます 。 









/ 品 きた きき ヨコ マロ ロ 
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LIE6 上 Chrome Safari 5 | Firefox 4 』 Opera11 1 iOS4 | Android2 


55SFE 5 TIHN-1 ら 
ドラ ッ グ 時 に 処理 を 行う 


ここ で は 、 ド ラッ グ 時 に 処理 を 行う 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<metq charset="utf-8"> 
<tttle>SqmpLe</tttte> 
<ltnk rel="stylesheet" href="css/matn.css "> 
<SCrtDt src="]S/sqmpte .]S "></sCrtDt> 

</head> 

<body> 
<h1> ド ラッ グ 処 理 </h1> 
<div id="aqrea1" draggabte="true"> ド ラッ グ 可 能 領 域 1</div> 
<div 1d="area2" draggabte="true"> ド ラッ グ 可 能 領域 2</div> 
<div td="area3" draggabte="true"> ド ラッ グ 可 能 領 域 3</dtv> 
< く OUtDut></OutDut><bP> 


< く OUtDut></OutDut> 


ゅ ロロ 


ナ \ スー SEIEK2 ミ Ia 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


window .gddEventLtstener("1oqd",。 functton(){ 





var ele = document.getEtementsByTagName( "output"): 
var dragEte = document.getElementsByTagName("div"): 
// ドラ ッ ク 関 連 イ ペン ト を 割り 当て 
for(var 1= の : 1<dragEte.Length: 1++){ 
// ドラ ッ グ 開始 イベ ント を 設定 
dragEte[1] .gddEventLtstener("dragstart", functionCevt){ 
Var 1d = evt.tqrget .1d: 
ele[9] .innerHTML = "1D 名 :"+td+" を ドラ ッ グ 開始 ": 
}, faqlse): 
// ドラ ッ グ 中 イベ ント を 設定 
draqgEte[i] .qddEventLtstener("drag"。 functionCevt){ 
var 1d = evt.target.1d: 
var ttme = (new Date()).getTtme(): 
ele[1] .innerHTML = "1TD 名 :"+1id+" を ドラ ッ グ 中 ": 
+, false): 
// ドラ ッ ク 開 始 イ ペン トド を 設定 
draqgEte[i] .qddEventLtstener("drggend" 。 functiton(Cevt){ 
var 1d = evt.target.1d: 
ele[9] .tnnerHTML = "ドラ ッ グ 終了 ": 
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き 呈 ビ ピロ TI ロト NI- 1 日 ら mw ドラッグ 時 に 処理 を 行う 


ele[1] .tnnerHTML = "": 公 4 
+。 false): 


} 
+, faqlse): 


ブラ ウザ で index.html を 表示 し 、| div」 要素 を ドラ ッ グ する と 、 ド ラッ グ 開 始 の メッ セー ンジ と ID 
が 表示 され ます 。 ドラ ッ グ 中 に も メッ セー ジ が 表示 され ます 。 


ID 名 :area1 を ドラ ッ グ 開始 
ID 名 :area1 を ドラ ッ グ 中 





ドラ ッ グ が 終了 する と 、 終 了 の メッ セー ジ が 表示 され ます 。 


AX だき ココ ヨコ マロ ロ 
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Ac ヨコ マロ ロロ 
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生 品 ビ ピロ 丁 | 口 ト ! - 1 日 m ドラ ッ グ 時 に 処理 を 行う 


時 ラ ブ 時 に 処理 を 行う に は 
] 「dragstart」 「drag」 [dragend」 イベント を 補足 する 


ドラ ッ グ 時 に 処理 を 行う に は 、 次 に 示す イベ ント を 捕捉 し ます 。 












ドラ ッ グ を 開始 し た と き 
ドラ ッ グ 中 
ドラ ッ グ を 終了 し た と き 
要素 で は 、| ondragstart」 の よう に 「onm」 を 付け た プロ パテ ィ に イベ ント ハン ドラ を 設定 
で きま す 。 また 、| addEventListener() 」 メ ソ ッ ド を 使っ て イベ ント リス ナー を 使っ て 設定 す 
る こと も で きま す 。 
HTML5 で は 、 要素 に 属性 で | draggable="true"」 を 指定 する だ け で ドラ ッ グ が 可能 
に な り ま す 。 また 、| draggable」 属 性 を 指定 し な く て も 「img]」 要素 ( 画 像 ) や 「a」 要 素 、 選 
択 し た 文字 は デフ ォ ル ト で ドラ ッ グ 可能 に な っ て いま す 。 












思 








LIE9 Chrome 1 Safari 5 1 Firefox 4 1 Opera 11 』 iOS4 1 Android2 !WP_ 


stLJTN・ 1 は ね 


ペー ジ の 読み 込み や DOM の 構築 が 
完了 し た 際 に 処理 を 行う 


ここ で は 、 DOM の 構築 が 完了 し た 際 に 処理 を 行う 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metg Charset="utf-8"> 
<tttle>SampLe</t1tle> 
<SCrtDt src="]S/sample . ]S "></SCPr1Dt> 

</head> 

<body> 
<h1>DOMContentLoaded/1oqd イ ベン ト </h1> 
<OUtDu キ ></OutDut> 

</body> 

</html> 


JavaScript の コー ド (sample.jS) 


witndow .qddEventListener("1oad" 。 functton()1 





var ele = document.getEtementsByTagName( "output")[ の ]: 
// 1oadd イ ベン ト が 発生 し た 事 を 画面 に 出力 
ele.tnnerHTML += "1ogd イ ベン ト 発 生 <br>": 

+。 foalse): 

window .addEventLtstener( "DOMContentLogded" , functton()+ 


AA べ 光 定 笠 ヨコ コマ ロロ 


var ele = document .getEtementsByTagName( "output")[9] : 

// DOMContentLogded イ ベン ト が 発生 し た 事 を 画面 に 出力 

ele.innerHTML += "DOMContentLoaqded イ ベン ト 発 生 <br>": 
+, false): 


ブラ ウザ で index.html を 表示 する と 、 イベ ント が 完了 し た 際 に メッ セー ジ が 順番 に 表示 され 
ます 。 


| DOMIContentlLoaded/load 
イベ ント 


DOMContentLoaded イ ベン ト 発 生 
load イ ベン ト 発 生 
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mm ビ ロ TI ロ 内 -1 日 呈 mw ペー ジ の 読み 込み や DOM の 構築 が 完了 し た 際 に 処理 を 行う 


「DOMContentLoaded」 イ ベン ト を 検知 する 
DOM の 構築 が 完了 し た 際 に 処理 を 行う に は 、「DOMContentLoaded 」 イ ベン ト を 検 
知 し ます 。「DOMContentLoaded」 イ ベン ト は 、 ペー ジ の 読み 込み が 完了 し た こと を 示 
す |「load」 イ ベン ト よ り も 先 に 発生 し ます 。「DOMContentLoaded」 は ペー ジ 上 の DOM 
の 使用 が 可能 に な っ た こと を 示す の で 、 この イベ ント が 発生 し た 後 で あれ ば 、 スク リプ ト 
で DOM 操 作 を 行う こと が で きま す 。 















6 口 l 


テ A く 光 密 笠 コ コ エコ マロ ロ 
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LIE6 Chrome Safari 5 | Firefox 4 1 Opera11 」 iOS4 」 Android2 IWP_ 


=1 コ mglalNaI=y/ 
リセ ッ ト 時 ・ 送 信 時 に 処理 する 


ここ で は 、 送信 時 ・ リ セッ ト 時 に 処理 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttte>SqmpLe</t1tle> 
<scrtpt src="]s/sqmple .]S"></SCrtpt> 
</heqd> 
<body> 
<h1> リ セッ トン / 送 信 時 に 処理 </h1> 
<fori> 
<1tnput type="text" 1d="myFLd"><bP> 
<tnput type="reset" votue=" 初 期 化 " 1d="rstBtn"> 
<input type="submtt" vatue=" 送 信 " 1d="sndBtn"> 
</form> 
<OutDu キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.addEventLtstener("1oagd",。 functton()t 





テア \/ ユ 、 に に まき に:4 ミド 


var ele = document .getELementsByTagName( "output")[9] : 
// フォ ー ム の 参照 を 変数 に 代入 
var myForm = document.getELementsByTagName("form")[9]: 
// フォ ー ム に reset イ ベン ト を 割り 当て 
myForm .qddEventListener("reset"、function(evt){ 
ele.innerHTML = "リセ ッ ト ボ タン を 押し まし た 。 ": 
+。fatse): 
// テキ スト フィ ー ル ド に cut イ ベン ト を 割り 当て 
myForm .gddEventListener("submtt"。 functton(Cevt){ 
ele.innerHTML = "送信 ボタ ン を 押し まし た 。 ": 
// 空欄 チェ ッ ク 
var text = document.getELementById("myFlLd").value: 
tf (!text){ 
ele.innerHTML += "<br> 空 欄 で す ": 
// デフ ォ ル ト の イベ ント を 禁止 
evt. preventDefault(): 
} 
}, false): 
+, false): 
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mm EETIHN-1 晶 77 mm リセット 時 ・ 送 信 時 に 処理 する 


ブラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド に 文字 を 入力 し た 後に 初期 化 ボ タン を ク 
リッ ク す る と 、 テキ スト フィ ー ル ド の 内 容 が 初期 化 ( こ の 場合 は 何 も 文 字 が な い 状 態 ) され ます 。 


ーーーーー Fmー- ーーーーーーー……… ーーーーーーー… 


1 XX 





療 信 ボタ ン を クリ ッ ク す る と 空 億 チェ ッ ク が 行わ れ 、 空欄 の 場合 は その 旨 メ ッ セ ー ジ が 表示 さ 
れれ ます 。 


リセ ッ ト ン 送信 時 に 処理 | 








. 初 期 化 | 送信 」 
送信 ボタ ン を 押し まし た 。 
空欄 で す 





AA くき 二 衝 コロ ヨコ ヨコ マロ ロ 


リセ ッ ト 時 に 処理 する に は 「reset」 イベ ント 、 
送信 時 に 処理 する に は 「submit」 イベ ント を 補足 する 


リセ ッ ト ボ タン が クリ ッ ク さ れる と 、| form」 要素 で |reset」 イ ベン ト が 発生 し ます 。「form」 
康 の | onreset]」 プロ パテ ィ に イベ ント ハン ドラ を 設定 する か 、「addEventListener() 」 メ 
ソ ッ ド を 使っ て イベ ント ハン ドラ を 設定 し ます 。 

送信 ボタ ン が クリ ッ ク さ れる と 、| form」 要素 で |submit」 イ ベン ト が 発生 し ます 。 「form 」 


NEPOINT 


妥 素 の | onsubmit」 プロ パテ ィ に イベ ント ハン ドラ を 設定 する か 、「addEventListener() 」 
メソ ッ ド を 使っ て イベ ント ハン ドラ を 設定 し ます 。 空欄 チェ ッ ク な ど を 行っ た 際 に 、 デー タ を 送 
信 し た く な い 場 合 が あり ます 。 デー タ を 送信 し た く な い 場 合 、「 onsubmit」 プロ パテ ィ に イベ 
ント ハン ドラ を 設定 し た ら 、 最後 に 「return false」 と し ます 。 イベ ント リス ナー の 場合 は 、 イ 
ベン ト オ プ ジェ クト の | preventDefault() 」 メ ソ ッ ド を 呼び 出し ます 。 これ に よっ て 、 フォ ー ム 
に 入力 され た デー タ は 送信 され な く な り ま す 。 





関連 項目 ょ ! 


生ま 20 汗 凍り 1tMRYe22SCA eVSA2cD3620YeNee 3 いこ < の 11538 20 p.333 
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LIE6 Chrome 」 Safari 5 | Firefox 4 1 Opera11 | OS4 | Android 2 』WP 


=1 ゴ ilmIN 加 ニニ 
スク ロー ル 時 に 処理 を 行う 


ここ で は 、 スク ロー ル 時 に 処理 を 行う 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.htm) “1 


、<!DOCTYPE html> 
<html> 
<hegd> 
<metq charset="utf-8"> 
<tttle>SqmplLe</t1 て le> 
<SCP1Dt Src="]S/Sample .]S "></SCF1Dt> 
</hegd> 
<h1> ス クロ ー ル 時 に 処理 </h1> 
<OutDut></OutDut> 
<toble border="1" width="329" hetght="1599"> 
<tm><td> Samp Le</td></tP> 
</tgble> 
マ body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener( "togd"。 functton(){ 

var ele = document .getEtementsByTagName( "output") う [9] : 

// body 要 素 の スク ロー ルイ ベン ト を 設定 

wtndow.aqddEventLtstener("scroll"。functton(Cevt){ ー 
var ttme = (new Date()).getTtme(O: 「 人 
ele.innerHTML = "スク ロー ル 中 :"+time: ' 0 
// スク ロー ル 位 置 を 読み 出し 
var poSsY = document.documentEtement.scrollTop || document.body.scrollTop: 
ele.innerHTML = " ブ "+posY: 
// output 要 素 の 表示 位置 を 設定 


etle.style.posttton = "aqbsolute": 





し 口 | 


ロ || 


ち 口 





レア 品 き 光 二 者 ヨコ マロ ロ 


ele.style.top = POsY + "DX": 
す , foqtse): 
+, false): 
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司 戸 ビビ ロ 丁 | 口 届 - 1 日 日 m スク ロー ル 時 に 処理 を 行う 


ブラ ウザ で index.html を 表示 し 、 スク ロー ル す る と 、 時 間 を 示す ミリ 秒 と スク ロー ル 量 が 表示 
され ます 。 








テ ナ ソ へ 記 に ま 持 4 ミド 


mislli 政 スク ロー ル 時 に 処理 する に は 「scroll」 イベ ント を 捕捉 する 


スク ロー ル す る と 、 有 要素 の 対し て |scroll] イベ ント が 発生 し ます 。 イベ ント が 発生 
し た ら 処 理 す る に は 、 要素 の 「onscroll] プロ パテ ィ に イベ ント ハン ドラ を 設定 する か 、 
| addEventListener () 」 メ ソ ッ ド を 使っ て イベ ント ハン ドラ を 設定 し ます 。 

スク ロー ル 位 置 を 求め る 場合 は 、 次 の プロ パテ ィ を 参照 し ます 。 


人 NT 
ーー ヤーーーー…ー 本 
な お 、iPhone や iPad、 Android の 場合 、 scroll イ ベン ト は パソ コン と は 異な り 、 スク ロー 
ル さ せ た 後 に 発生 し ます 。 





関連 項目 ょ ゅ ゅ 
き 指定 位置 まで スク ロー ル さ せる EPSSYEYVXYKMYKXU ま USNKXKVKN は XYKKSKKUXKKK ま WUY を セス ピ リ イル ャ ルト ルス D. ど 69 
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LIE6 1 Chrome 』 Safari 5 | Firefox 4 ! Opera 11 1 iOS4 』 Android2 


SE も まま 4 も 01N- ロジ 


テキ スト フィ ー ル ド 内 の テキ スト 選択 時 に 
ノー ーー 
処理 を 行う 
ここ で は 、 テキ スト フィ ー ル ド 内 の テキ スト 選択 時 に 処理 を 行う 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttle>SampLe</t1tle> 
<SCrtDt src="]S/sampLe.]S"></SCr1Dt> 
</hegd> 
<body> 
<hi> テ キス ト 選 択 時 に 処理 </h1> 
<formW> 
名 前 :<tnput type="text" value="KazuhtroFuruhata" 1d="uName "><br> 
</form> 
<div> 選 択 位置 の 範囲 : <output></output></dtv> 
<div> 選 択 位置 の 文字 :<output></output></d1tV> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .addEventLtstener("1oaqd"。 functton( ){ 





AX た 幸 ココ エコ マロ 


var ele = document.getEtLementsByTagName( "output"): 
// テキ スト フィ ー ル ド に イベ ント を 設定 
document . getEtementByIdC"uName").qddEventLtstener("setect", functton(evt){ 
// 選択 開始 位置 を 取得 
var stgrtPos = this.selecttonStart: 
// 選択 終了 位置 を 取得 
var endPos = thts.selecttonEnd: 
// 選択 範囲 を 出力 
etle[9] .tnnerHTML = startPos+"< ン "+endPoS: 
// 選択 範囲 の 文字 を 抜き 出す 
var text = thts .vatue .substrtng(startPos , endPos): 
// 結果 を 出力 
ele[1] .tnnerHTML = text: 
}, false): 
+, false): 
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7 さき 宇 ココ ヨコ エコ マロ ロロ 
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m ビビ TI ロト | - 1 日 mw テキ スト フィ ー ル ド 内 の テキ スト 選択 時 に 処理 を 行う 


ブラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド 内 の テキ スト が 選択 され る と 、 選択 範囲 
の 位置 を 選択 し た 文字 が 表示 され ます 。 


テキ スト 選択 時 に 処理 


名 前 : Kazu 較 議 Furuhata 
選択 位置 の 範囲 :4ーs 
選択 位置 の 又 字 : hiro 





mamli 下 テキ スト 選択 時 に 処理 を 行う に は 「select」 イベ ント を 捕捉 する 


テキ スト フィ ー ル ド 内 の テキ スト が 選択 され る と 、「select」 イ ベン ト が 発生 し ます 。 テキ ス 
ト フ ィ ー ル ド の | onselect」 に イベ ント ハン ドラ を 設定 する か 、「addEvenetListener()」 メ 
ソ ッ ド を 使っ て イベ ント ハン ドラ を 設定 し ます 。 

テキ スト フィ ー ル ド 内 の 文字 が 選択 され た 際 、 選択 され た 文字 の 範囲 や 文字 その も の 
を 取得 する こと が で きま す 。 イベ ント ハン ドラ 内 で [| this.selectionStart | プロ パテ ィ で 選 
状 開 始 位置 、| this.selectionEnd 」 プロ パテ ィ で 選択 終了 位置 を 取得 する こと が で きま 
す 。 選択 され た 文字 は | this.value」 に 文字 列 全体 が 入っ て いる の で 、[「substring()」 メ 
ソ ッ ド を 使っ て 抜き 出し ます 。 


mml 融 昌 に 還 較 | 全 5ー8 で 動作 させ る に は 


サン プル は IE9 以 降 で は 動作 し ます が 、 IE6-8 で は エラ ー と な っ て 動作 し ませ ん 。 
IE6-8 で も 動作 させ る 場合 は 、 次 の コー ド の よう に な り ま す 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 


<head> 














<metq charset= "utf-8"> 
<tttle>SampLe</ て 1 人 tle> 







<SCP1Dt Src="]S/Sample.]S "></SCPtDt> 
</head> 
<body> 
<h1n> テ キス ト 選 択 時 に 処理 </h1> 


<form> 
















名 前 :<tnput type="text" vatue="KazuhtroFuruhagtg" 1d="uName"><br> 
</form> 
<div> 選 択 位置 の 範囲 :<span></span></dtv> 






還 王 ビ ピロ 丁 | 口 N!- 1 日 mw テキ スト フィ ー ル ド 内 の テキ スト 選択 時 に 処理 を 行う 


<div> 選 択 位置 の 文字 :<span></span></dtv> 】 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.ontoad = functton(){ 

var ele = document .getELementsByTagName( "span"): 

// テキ スト フィ ー ル ド に イベ ント を 設定 

document.getEtementById("uName").onsetect = functton(Cevt){ 
var d = document.selectton.creaqteRange( ): 
var te = this.createTextRange(): 
te . setEndPotnt("EndToStart"。d): 
var StartPos = te.text . Length: 
te .setEndPotnt( "EndToEnd" 。 d): 
var endPos = te.text.length: ロ 
ele[ の 9] .tnnerHTML = startPos+"^ー ン "+endPos: ] 
var text = thts.vatue . substrtng(startPos , endPos): 
ele[1] .1nnerHTML = text: 


つ 
1 


す 1 





ご ] 男 
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gE じ 11 唱 NN-19 ロ 


指定 し た 座標 に ある 複数 の 要素 を 求め る 


IE10 で は 指定 し た 座標 に ある 要素 を 求め る 機能 が 拡張 され まし た 。 ここ で は 、 指定 し た 座 
標 に ある 要素 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<htmtl> 





<head> 
<metq Charset="utf-8"> 
<tttle>SampLe</ttt1e> 
<SCrtDt Src="]S/Sqmpte.]S"></SCrtDt> 

</head> 

<body> 
<hl> ク リッ ク し た 座標 に ある ノー ド を 表示 </h1> 
<p><span> ク リッ ク </spgan> し て くだ さい </p> 
<OUtDuU キ ></OutDut> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("1oad"。 functton(){ 





品 つ [し] 6 


AS を 香 コ ヨコ ヨ エ コマ ロロ 





var ele = document.getElementsByTagName("output")[9] : 
// body 要 素 に イベ ント リス ナー を 設定 
wtndow.qddEventLtstener("clLtck"。 functton(evt){ 
// 表示 する 領域 を 消去 
ele.1nnerHTML = ""・ 
// クリ ッ ク し た 座標 を 取得 
Var CX = evt.cCltentX: 
Var Cy = evt.cltentY: 
// クリ ッ ク 位 置 の ノー ドリ スト を 取得 
var nodeLtst = document.msELementsFromPotntCcx, cy): 
// ノー ドリ スト の タグ 名 一 覧 を 出力 
for(var 1= の : 1<nodeLtst.Length: 1++){ 
ele.tnnerHTML += 1+" : “"+nodeLtst[1] .tggName+ "<br>": 
} 
+,。 faqlse): 
}, faqtse): 


436 


mm 選 ビ ロ T「 口 NN -19 口 m 指定 し た 座標 に ある 複数 の 要素 を 求め る 


ブラ ウザ で index.html を 表示 し 、 ペー ジ 内 の 任意 の 場所 を クリ ッ ク す る と 、 クリ ッ ク し た 場所 
に ある ノー ド の 一 覧 が 表示 され ます 。 ノー ド の タグ 名 は 、 HTML の 記述 順 で 内 側 の も の か ら 
外側 の も の に 向かっ て 表示 され ます 。 


クリ ッ 


クリ ッ ク レ て くだ さい 





「elementsFromPoint()」 「elementsFromRect()」 メソッド を 使う 
指定 し た 座標 に ある 要素 を 求め る に は 、「 elementFromPoint() 」 メ ソ ッ ド 、| elements 
FromPoint() 」 メソ ッ ド 、「elementsFromRect() 」 メカ メッ ド の いずれ か を 使い ます 。 
「elementFromPoint() 」 メ ノッ ド は IE6 以 降 で 実装 され て お り 、 パラ メー タ に 指定 し た x 
座標 ・y 座 標 上 に ある 要素 を 返し ます 。 た だ し 、 要素 が 重なっ て いる 場合 に は 、 最も 手前 
の 要素 し か 返さ れ ま せん 。 
重なっ て いる 要素 すべ て を 取得 する 場合 は 、| elementsFromPoint() 」 メ ソ ッ ド を 使 
いま す 。 この メソ ッ ド は 、 指定 し た 座標 に ある 要素 すべ て を ノー ドリ スト と し て 返し ます 。 ま 
た 、 範囲 を 指定 し て 要素 を 取得 する 場合 は 、「 elementsFromRect() 」 メ ソ ッ ド を 使い ま 
す 。「elementsFromRect() 」 メ ソ ッ ド の パラ メー タ は 、 左 座標 、 上 座標 、 横幅 、 縦 幅 に 
な り ま す 。 
な お 、2012 年 7 月 時 点 で は 、「elementsFromPoint() 」 メ ソ ッ ド と | elementsFromRect 
() 」 メ ソ ッ ド に は 、 ベン ダー プレ フィ ックス が 必要 で す ( サ ンプ ル で も | ms」 の ベン ダー プレ 
フィ ックス を 付け て いる ) 。 


















7 くめ を 笠 コ ヨ コマ ロロ 
L | | 


ま 
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LIE 10 | Chrome | Safari 5 | Firefox6_ 


ー1 = 革 側 回 半 有 El は 一 邊 





CSS の メデ ィ ア クエ リ が 変化 し た ら 処理 する 





ここ で は 、 スタ イル シー ト で 利用 され る メデ ィ ア クエ リ が 変化 し た ら 処 理 する 方 法 に つい て 解 


説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 


<tttle>Sample</t1t1e> 


<Itnk rel="stylesheet" type="text/css" href="css/mtn.Ccss" 
medta="screen qnd (mtn-wtdth:249px) qnd (max-wtdth: 489px)"> 


<Ltnk rel="stylesheet" type="text/css" href="css/max .css'" 


medtq=”"screen qnd (mtn-wtdth:489px) qnd (max-wtdth:1924px)"> 


<SCPtDt src="]S/sqmple.]S"></scrtpt> 

</hegd> 

<body> 
<ht>Media Query が 切り 替わっ た 場合 に 処理 </h1> 
<p> ウ ィ ン ド ウサ イズ を 変更 し て くだ さい </p> 
<OUtDut></OuUtDut> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow.aqddEventLtstener("1ogd" functton(){ 
// マッ チ す る Media を 指定 。 IE19 は msMqtchMediq 








7 た 香 コ ヨ エコ マロ ロ 


wtndow.matchMedta( "(mtn-wtdth:489px)").addListenerCfunctton(){ 


var ele = document .getELementsByTqggName( "output")[9] : 
ele.tnnerHTML += "Cmtn-wtdth:489px) 検 知 <br>": 
} う : 
}, false): 
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mm 王 ロ 丁 | 口 N - 19 ] mw CSS の メデ ィ ア クエ リ が 変化 し た ら 処 理 する 
ブラ ウザ で index.html を 表示 し ます 。 ウイ ンド ウ の 横幅 に 応じ て ペー ジ の 背景 色 が 変化 す 


る CSS フ ァイル が 読み 込ま れ て お り 、 ウィ ンド ウ 幅 を 変化 させ る と 、 該当 する メデ イア クエ リ と マッ 
チ し た 場合 メッ セー ジ が 表示 され ます 。 











7 くき を コ ヨ 上 コマ ロコ 





メデ ィ ア クエ リ が 変化 し た ら 処 理 す る に は 
「window.matchMedia()」 メ ソ ッ ド と 「addListener()」 メ ソ ッ ド を 使う 


メデ ィ ア クエ リ が 変化 し た ら 処理 する に は 、「windowmatchMedia () 」 メ ソ ッ ド と | add 
Listener ( ) | メソ ッ ド を 使い ます 。 パラ メー タ に は マッ チ さ せる クエ リ 文 字 列 を 指定 し ます 。 
また 、 メデ イア クエ リ が 変化 し た 場合 に 処理 する た め に 、| addListener() 」 メ ソ ッ ド を 使い 


ロロ NEPUHINT 


ます 。[「addListener() 」 メソッド の パラ メー タ に は 、 メデ イィ アク エリ が 変化 し た 際 に 呼び 
出さ れる 関数 を 指定 し ます 。 

な お 、 IE10 で は 、「matchMedia() 」 メ ソ ッ ド を 使用 する に は 、| msMatchMedia)」 の 
よう に ベン ダー プレ フィ ックス を 付け る 必要 が あり ます 。 





関連 項目 ゅ 
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LIE9 1Chrome 1 Safari 5 1 Firefox 4 1 Opera 11 1 iOS4 | Android2 | WP 


5 コ ヒ ビ 1 口内 -192 


コン テキ スト を 取得 する 








ここ で は 、 Canvas の 描画 を 扱う 場合 に 必要 な コン テキ スト を 取得 する 方 法 に つい て 解説 し 
まま 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<title>Sqmple</ttt1e> 
<SCriDpt src="]s/sample js"></script> 
</head> 
<body> 
<canvos wtdth="489" hetght="64"> 
Canvas 対 応 プ ラウ ザ を 使用 し て 下さ い 
</CqnVQaS> 
<br> 
< く OutDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.gddEventLtstener("1ogd"。 functton(){ 
var ele = document.getELementsByTqagName( "output")[9]: 
// Cgnvas 要 素 を 読み 出し 
Var myCoanvas = document.getEtementsByTagName( "canvas")[9] : 
// コン テキ スト を 取得 
var context = myCanvas .getContext( "2d"): 
tf (context == null){ 
ele.tnnerHTML = "Canvas 2D Context は 使用 で きま せん ": 
+etset 
ele.1nnerHTML = "Canvas 2D Context は 使用 で きま す ": 
} 
+, faqlse): 





各局 ビ ロ 丁 | 口 N-1 ラ 2 mw コン テキ スト を 取得 する 


プラ ウザ で index.html を 表示 する と 、 Canvas 2D コ ン テ キ スト が 使用 可能 か どう か 調べ た 
結果 が 表示 され ます 。 


Canvyas 2D Context は 使用 で きま す 


mi ョ slNl 画 コン テキ スト を 取得 する に は 「getContext()」 メ ソ ッ ド を 使う 


Canvas に は 、 ピク セル 単位 で 処理 を 行う 二 次 元 画像 を 扱う 2D Context と 、 3D 捕 画 
を 扱う WebGL 用 の コン テキ スト が あり ます 。 他 に も ブラ ウザ 独自 に コン テキ スト が 用 意 さ 
れ て いる 場合 も あり ます 。 

この コン テキ スト を 取得 する に は 、「 getContext() 」 メ ソ ッ ド を 使い ます 。 パラ メー タ に は 、 
取得 し た い コ ン テ キ スト 名 を 指定 し ます 。 2D の 場合 は 「"2d"」 を 、3D の 場合 は 「"web-gl 」 
(ベン ダー プレ フィ ックス が 必要 な 場合 も ある ) を 指定 し ます 。 

コン テキ スト が 取得 で き な か っ た 場合 、| getContext() 」 メ ノッ ド は 、|null」 を 返し ます 。 
また 、「 getContext() 」 を 使っ た 場合 、 後 か ら 他 の コン テキ スト を 取得 する こと は で きま せ 
ん 。 つま り 、 Canvas に は 1 つの コン テキ スト し か 利用 で き な い こと に な り ま す (2D と 3D の 混 
在 は で き な い )。 
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=1 コ mlIlmIN に に 
バス を 作成 する 


ここ で は 、 パス を 作成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<rmetq Charset="utf-8"> 
<tttle>Sample</t1t1e> 
<SCrtpt src="]s/sample.]s"></scrtpt> 

</head> 

<body> 
<canvas wtdth="329" height="249"> 

Canvoas 対 応 ブ ラウ ザ を 使用 し て 下さ い 

</CanVqS> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd" 。 functtion(){ 
// Canvas 要 素 を 読み 出し 
Var myCqnvas = documert.getElLementsByTagName( "canvas") う [の]: 
// コン テキ スト を 取得 
Var context = myCanvas .getContext("2d"): 
tf (!context){ return: } 
// 新規 に パス を 作成 
context.begtnPath( ): 
// 図形 の 座標 値 を 設定 
context.moveTo(9,9): 
context. litneTo(139, 89): 
context.LtneTo(29, 150): 
// パス を 閉じ る (クロ ー ズ パス ) 
context.closePath( ): 
// 塗り つぶ す 色 を 設定 
context.ftLLStyle = "red": 
context.ft11(): 

+, faqtlse): 


生 呈 ビ ロ T 丁 | 口 N-19 コ m バス を 作成 する 


プラ ウザ で index.html を 表示 する と 、 パス を 使っ て 描画 し た 三角 形 が 表示 され ます 。 


TRS 新規 に パス を 作成 する に は 「beginPath)」 メ ソ ッ ド 、 
クロ ー ズ パス に 設定 する に は 「closePath()」 メ ソ ッ ド を 使う 


Canvas 2D Context で は 、 図形 を 描画 する 際 、 直接 、 描く タイ プ の メソ ッ ド と 、 パス を 
作成 し た 後 で 描画 する タイ プ が あり ます 。 直接 、 描く タイ プ と し て は 、| 名 Rect() 」 メ ソ ッ ド 


な ど が あり ます 。 直接 、 描く タイ プ は 、 四角 形 な ど シ ンプ ル な も の に 限定 され て いま す 。 よ 
り 複雑 な 図形 を 描画 する 場合 は パス を 作成 し 、 その 中 で 描画 する 図形 の 座標 を 設定 し 
て いき ます 。 座標 の 設定 が 終わ っ た ら 、「stroke() 」 メ ソ ッ ド や |「f) 」 メ ノッ ド を 使っ て 捕 
画 し ます 。 

パス を 作成 する に は 、「beginPath () 」 メ ノッ ド を 使い ます 。 これ に よっ て 、 これ まで 作成 
し た パス は 破棄 され 、 新 規 に パス が 作成 され ます 。 パス の 作成 は 、| neTo(」 メ ノッ ド や 
「arc()」 メ ノッ ド 、「rect 0) 」 メ ソ ッ ド な ど 、 直接 、 描画 し な い メ ソ ッ ド を 利用 し て 行い ます 。 
作成 し た パス は 、 オー プン パス と クロ ー ズ パス の 2 種類 に な り ま す 。 始点 と 終点 を 結ば な 
い 場 合 が オー プン パス 、 始点 と 終点 を 結ぶ 場合 は クロ ー ズ パス に な り ま す 。 クロ ー ズ パス 
に する 場合 は 、「 closePath () 」 メ ノッ ド を 使い ます 。 

な お 、 作成 する パス は ベク トル の 向き (描画 方 向 ) が 時 計 回 りか 反 時 計 回 りか に よっ 
て 、 パス が 重なっ た 部 分 の 表示 結末 が 異な り ま す 。 


miml 融 8 に 上 較 ATOid で の 不具 合 


Android 20 一 4.0 の 標準 プラ ウザ で は 、「arc( 」 メ ソ ッ ド で の 時 計 回 り / 反 時 計 回 り 0 の 
利 定 は 無視 され ます 。 この た め 、 ベク トル の 向き に よっ て くり 抜く (ドー ナツ 型 な ど ) こ と は で 
きま せん 。 Android 4.1 以 降 の 標準 プチ ウザ (Chrome for Android ) や Firefox な ど 、 
他 の プラ ウザ な ら 正 し く 処 理 さ れ ま す 。 
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直線 を 所 画す る 





ここ で は 、 直線 を 描画 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<meta charset="utf-8"> 
<titte>Sqmpte</tttte> 
<Scrtpt src="]s/sqmple .]S"></script> 
</head> 
<body> 
<cqnvaS wtdth="329" hetght="249"> 
Canvgs 対 応 プ ラウ ザ を 使用 し て 下さ い 
</cCanVQS> 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


witndow.qddEventLtstener("toad", function(){ 
var ele = document.getEtementsByTagName( "output")[9] : 
// Canvas 要 素 を 読み 出し 
var myCanvas = document.getElementsByTagName( "canvas")[9] : 
// コン テキ スト を 取得 
Var context = myCanvas .getContext("2d"): 
tf (!context){ return: + 
// 新規 に パス を 作成 
context.begtnPath( ): 
// 直線 の 開始 座標 を 指定 
context.moveTo(29, 59): 
context.ltneTo(239, 8 の ): 
// 線 の 色 と サ イズ を 設定 
context.strokeStyle = "red": 
context.LineWidth = 8: 
// 直線 を 描画 
context. stroke(): 
+, false): 





生 王 ビ ビビ TI 品 N-194 wm 直線 を 描画 する 


ブラ ウザ で index.html を 表示 する と 、 赤色 の 直線 が 表示 され ます 。 








mm 直上 直 線 の 描画 を 行う に は 「lineTo()」 メ ソ ッ ド を 使う 


直線 を 描画 する に は 、「lineTo() 」 メ ノッ ド を 使い ます 。 パラ メー タ に は 、 直線 の 終了 
点 と な る X 座 標 と Y 座 標 を 指定 し ます 。「lineTo() 」 は 、 現在 の ペン 位置 を 始点 に し て 
直線 を 構成 し ます 。 ペン 位置 を 変更 する に は 、|moveTo() 」 メ ソ ッ ド を 使い ます 。 パ ラ 
メー タ に は 、 移動 先 の X 座 標 と Y 座 標 を 指定 し ます 。 簡単 な 直線 を 描画 する 場合 に は 、 
「moveTo() 」 メ ノッ ド と 「 lineTo (0 」 メ ソ ッ ド を 組み 合わ せま す 。 

「jineTo() 」 は パス の 座標 を 設定 し て いく だ け の メソ ッ ド な の で 、 実際 に 描画 する 場合 
に は 、「stroke() 」 メ ソ ッ ド 、 ま た は 、|「 名 () ] メ ノッ ド を 使い ます 。 


mm 旨 IIN 症 連続 し て 直線 を 所 くに は 


連続 し て 直線 を 描く に は 、「lineTo() 」 を 列記 し ます 。 た と えば 、 次 の よう に 記述 し ます 。 













context.moveTo(9, 9): 
context.1tneTo(199, 59): 
context.1tneTo(129, 99): 
context.1tineTo(39, 120): 
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四角 形 を 描画 する 


ここ で は 、 四角 形 を 描画 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta chagrset="utf-8"> 
<tttle>SqmpLe</tttte> 
<SCrtDt src="]S/sample.]S"></ScrtDpt> 

</heqd> 

<body> 
<caqnvaSs wtdth="329" hetght="249"> 

Canvas 対 応 ブ ラウ ザ を 使用 し て 下さ い 

</CqnVaSs> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow . gddEventLtstener("1oad"。 functton(){ 





var ele = document.getElementsByTagName( "output")[9] : 
// Canvos 要 素 を 読み 出し 

var myCanvas = document.getELementsByTagName( "canvas")[9] : 
// コン テキ スト を 取得 

var Context = myCanvas .getContext( "2d"): 
tf (!context)† return: } 

// 線 の 色 と サ イズ 、 塗り の 色 を 設定 
context.strokeStyle = "red": 
context.LtneWidth = 8: 

context.ftLLStyle = "orange": 

// 塗り 潰さ れ た 四角 形 を 描く 
context.ftLLRect(19,19, 399, 229): 

// 四角 形 で 消去 
Context.clLearRect(59,59, 229, 149): 

// 枠 だ け の 四角 形 を 描く 

Context. strokeRect(39,39, 269, 189): 

// 線 の 色 と サ イズ 、 塗り の 色 を 設定 
Context.strokeStyle = "blLue": 
context.ltneWtdth = 4: 

context.ftLLStyle = "rgba(9,255.9, 9.5)": 
// パス で 四角 形 を 描く 

context .begtnPath( ): 

Context .rect(89,89, 169,89): 


m 王 古 | 口 N -195 m 四角 形 を 描画 する 


context.closePath( ): 4 
context.ft11(): 
context. stroke(): 

+, fgqlse): 


ブラ ウザ で index.html を 表示 する と 、 さま ざま な 四角 形 が 描画 され ます 。 


四角 形 の 描画 を 行う に は 
mm 「fiiRect()」 「strokeRect()」 「clearRect()」 「rect()」 メ ソ ッ ド を 使う 


四角 形 を 描画 する メソ ッ ド は 、 次 の 4 種類 が あり 、 用 途 に よっ て 異な り ま す 。 





塗り つぶ し た 四角 形 を 描く 

枠 だ け の 四角 形 を 描く 

四角 形 で 消す (Canvas の 背景 色 、 また は 、 透明 に な る ) 

四角 形 の パス を 作成 する 

単純 に 四角 形 を 描く な ら 、| Rect() 」 メ ソ ッ ド か | strokeRect() 」 メソ ッ ド を 使い ま 

す 。 他 の パス を 組み 合わ せ て 複雑 な 図形 を 描く 場合 に は 、| rect() 」 メ ソ ッ ド を 使い ます 。 
| rect() 」 メ ノッ ド の 場合 、 パス で 図形 を 構築 する た め 、「 邑 ()」 メ ノッ ド か 、| stroke() 
メソ ッ ド を 使わ な いと 描画 され ませ ん 。 
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LIE9 」 Chrome 』 Safari 5 」 Firefox 4 1 Opera11 | iOS4 」 Android2 1 WP 」 





5E に LIN-1 ワ 6 ら 


円 や 円 弧 を 描く 


品 
肖 ここ で は 、 円 や 円 弧 を 描く 方 法 に つい て 解説 し ます 。 
HTML の コー ド ndexhtm) 
ロ 
( 


<!DOCTYPE html> 





<html> 

pe <head> 

<meto charset="utf-8"> 
間 <tttte>Sample</t1tte> 
ロ <SCPtDt src="]S/sqmpte.]S "></scrtpt> 

</head> 

_ ロ <body> 
人 <cqnvaS width="32 の 9" hetght="249"> 
_ ロ Canvas 対 応 プ ラウ ザ を 使用 し て 下さ い 
当 </CcqnVqS> 


ーg </body> 

当 </html> 

Me ロ 

還 JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("toad"。 function(){ 
var ele = document.getELementsByTagName( "output")[9] : 
// Canvas 要 素 を 読み 出し 
var myCanvas = document.getELementsByTagName( "canvas")[9] : 
// コン テキ スト を 取得 
var context = myCanvas.getContext("2d"): 
tf (!context){ return: +} 
// 線 の 色 と サ イズ を 設定 
context.strokeStyle = "red": 
context.1ttneWidth = 4: 
// 正 円 を 描く 
context.begtnPath(): 
context . grc(169 , 129, 49。 9, Math.PT*2, true): 
Context. stroke(): 
// 円 弧 を 描く 
context .begtnPath( ): 
context. qrc(59,59, 29, 9, -Magth.PI/2, true): 
context. stroke(): 
// 円 弧 を 描く 2) 
context.beginPath(): 
context.moveTo(29,199): 
Context.arcTo(299 ,299, 159, 299, 39): 
context. stroke(): 

}, false): 
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450 


還 ビ ロ 丁 | 口 N-196 wm 円 や 円 弧 を 描く 


ブラ ウザ で index.html を 表示 する と 、 正 円 、 円 線 、 直 和 線 と 円 弧 の 3 種類 が 描画 され ます 。 


=Iml 記 中 円 や 円 疲 の 描画 を 行う に は 「arcO」 メ ソ ッ ド や 「arcTo()」 メ ソ ッ ド を 使う 


円 や 円 弧 を 描画 する に は 、|arc() 」 メ ソ ッ ド 、 また は 、| arcTo() 」 メ ノッ ド を 使い ます 。 
「arc() 」 メ ソ ッ ド は 、 円 の 中 心 座標 と 半 僅 、 そ し て 開始 角度 と 終了 角度 を 指定 する こと 
が で きま す 。 開始 角度 と 終了 角度 を 指定 する こと で 、 円 弧 を 描く こと が で きま す 。 また 、 
開始 角度 、 終了 角度 は ラジ アン で 指定 し ます 。 

「arcTo( 」 メ ソ ッ ド は 、 円 弧 と 直線 を まとめ て 描き ます 。 


arc(x。 y, radtus , StartAngle, endAngle, gnttclockwtse ) 


arcTo(x1。 y1, x2Z。yZ2, radtus ) 

な お 、 それ ぞ れ の パラ メー タ は 、 次 の 図 の よう に な り ま す 。 
一 円 / 円 弧 一 円 引 
arc(x,y,radius,startA,endA,anticlockwise) arcTo(x1,y1,x2,y2,radius) 


anticlockwise 
ーー 2 w 


履 
に 
ゃ 
ゃ 
\ 


(x2,y2) (x1,y1) 





miml 画 IN 較 AndrOid で の 不具 合 


Android 20 一 40 の 標準 プ ブチ ラウ ザ で は 、| arc() 」 メ ソ ッ ド で の 時 計 回 9 り / 反 時 計 回 り の 


指定 は 無視 され ます 。 この た め 、 ベク トル の 向き に よっ て くり 抜く (ドー ナツ 型 な ど ) こ と は で き 
ませ ん 。 Android 4.1 以 降 の 標準 プラ ウザ (Chrome for Android) や Firefox な ど 、 他 
の ブラ ウザ な ら 正 し く < 処理 さ れ ま す 。 
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gm 呈 ビ ロ TI ロ NI-196 wm 円 や 円 弧 を 描く 


mami 間 四 に 上 ()Der コ で の 不具 合 


Opera で は | arcTo0」 メ ソ ッ ド に 不具 合 が あり 、 パラ メー タ に よっ て は 正しく 描画 され ま 
せん 。 サン プル 正しく 描画 され ず 、Opera 12 で は 、 次 の 図 の よう に 描画 され て し まい ます 。 





央 Sample 
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LIE9 Chrome 』 Safari 5 」 Firefox 4 1 Opera11 1 iOS4 | Android 2 ! WP / 


EL) 上 1EJFM- ト 9 / 


曲線 を 指 く 


ここ で は 、 曲線 を 描く 方 法 に つい て 解説 し ます 。 中 


HTML の コー ド (index.html) ド 


<!DOCTYPE html> 
<html> 
<head> 





<metq charset="utf-8"> 財 
<tttle>Sqmple</t1tle> 
<scrtpt src="]s/sampte.]S"></scrtpt> 
</head> 
<body> ロ 
<canvas wtdth="329" hetght="249"> M 
Canvos 対 応 プ ブラ ウザ を 使用 し て 下さ い = 二 
</CanVQS> H 
</body> ロ 
</html> 
ロ 
Q 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("load" , functton(){ 
var ele = document.getEtementsByTagName( "output")[9] : 
// Canvas 要 素 を 読み 出し 
var myCanvas = document.getEtementsByTagName( "caqnvas")[9] : 
// コン テキ スト を 取得 
var context = myCanvgs .getContext( "2d"): 
tf (!context){ return: } 
// 線 の 色 と サ イズ を 設定 
context.strokeStyle = "red": 
context.1tneWitdth = 4: 
// 3 次 ベジ エエ 曲線 を 描く 
context.begtnPath(): 
context .moveTo(19, 19): 
context.bezterCurveTo(59 , 129, 199, 129, 299, 59): 
context. stroke(): 
// 2 次 ベジ エ 曲 線 を 描く 
context .begtnPath(): 
Context.moveTo(19,119): 
context. quadrattcCurveTo(59,229, 299, 159): 
context.stroke(): 
+。 fgqlse): 
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重 品 ビ ピロ T 口 NN-19 ワ 7 ョ mW 曲線 を 描く 


プラ ウザ で index.html を 表示 する と 、 上 に 3 次 ベジ エ 曲 線 、 下 に 2 次 ベジ エ 曲 線 が 描画 さ 
れ ま す 。 


曲線 の 描画 を 行う に は 「bezierCurveTo()」 メ ソ ッ ド や 
mM 剛 [quadraticCurveTo() 」 メソ ッ ド を 使う 


曲線 を 描画 する に は 、| bezierCurveTo() 」 メ ノッ ド 、 また は 、「quadraticCurveTo 
() メソッド を 使い ます 。「bezierCurveTo() 」 メ ノッ ド は 、 3 次 ベジ エ 曲線 を 描き ます 。 
3 次 ベジ エ 曲 線 に は 、 開始 点 と 終了 点 そ し て 2 つの 制御 点 が 必要 で す 。 この うち 、 開始 
点 は 、|moveTo() 」 メ ソ ッ ド を 使っ て 指定 し ます 。 

| quadraticCurveTo( 」 メ ソ ッ ド は 、 2 次 ベジ エ 有 曲線 を 描き ます 。 2 次 ベジ エ 有 曲線 は 、 
開始 点 と 終了 点 と 1 つの 制御 点 が 必要 で す 。 開始 点 は 、「moveTo() 」 メ ノッ ド で 指定 し 
ます 。 





bezterCurveTo(cp1x, cp1y, CPZx。 CPZ2y,。 x, y) 
quadrattcCurveTo(CcPXx , CDY, X, y) 


な お 、 それ ぞ れ の パラ メー タ は 、 次 の 図 の よう に な り ま す 。 


一 3 次 ベジ エ 曲 線 還 2 次 ベジ エ 曲 線 
bezierCurveTo(cp1x,cp1y,cD2x,cp2y,X,) quadraticCurveTo(cDx,CDy,XY) 


人 ハハ G/( 有 5 SBAUBO/SBAUB^) は に 旧 導 こ に 4 
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LIE9 』Chrome 1 Safari 5 | Firefox 4 1 Opera11 』 iOS4 』 Android2 IWP」 

















5E に 11EIN-1 ワ りー 
ビニ と 
多角 形 を 所 く 
ロ 
ここ で は 、 三 角形 や 十 二 角 形 な どの 多角 形 を 描く 方 法 に つい て 解説 し ます 。 中 
HTML の コー ド (index.html) ド 
<!DOCTYPE html> Las 
<html> 
<hegd> 本 
<meta charset="utf-8"> ロ 
<title>SampLe</t1tle> 回 
<scrtpt src="]s/sample. js"></scrtpt> I ロ 
</head> 
<body> Ii ロ 
<cqnvoSs width="329" hetght="249"> い 
Canvas 対 応 ブ ラウ ザ を 使用 し て 下さ い 了 
</CanVQS> N 
ーー 
</html> お 
JavaScript の コー ド (sample.js) Q 





witndow.qddEventLtstener("load" 。 functton(){ 
// Canvas 要 素 を 読み 出し 
var myCanvas = document.getEtementsByTagName( "canvas")[9]: 
// コン テキ スト を 取得 
var context = myCanvas.getContext("2d"): 
tf (!context){ return: } 
// 六角 形 を 描く 。 n 角 形 、 半径 、 中 心 X 座 標 、 中 心 Y 座 標 、 初期 角度 
drawPoly(6, 199, context, 169, 129, 39): 
// n 角 形 を 描く 
function draqwPolyCn, stze, context, baseX, baseY, startAngte){ 
// Canvas の 状態 を 保存 
context. save( ): 
// 指定 され た 座標 に 移動 
context.translate(baseX, baseY): 
// 線 の 色 と サ イズ を 設定 
context.strokeStyle = "red": 
context.LitneWidth = 1: 
// 新規 に パス を 作成 
context.beginPath(): 
// 角度 か ら 初 期 座標 を 求め る 
var degree = 369 / n: 
var rad = startAngle * Math.PI / 1809: 
var x = Stze * Math.cos(rogd): 


var y = Stze * Mgth.stn(rad): 
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mm 王 ロ 丁 | 口 N -19 日 mw 多角 形 を 描く 


context.moveTo(x, y): % 
// n 回 繰り 返す 
for(var 1=9: 1<n: 1++){ 
// 角度 を 求め る 
var qngle = 1 * degree: 
raqd = (qngle + stgrtAngle) * Math.PI / 180: 
// 角度 か ら XY 座 標 を 求め る 
x = S1ze * Math.cos(rad): 
y = stze * Math.stn(rad): 
// 直線 の 開始 座標 を 指定 
context.lineTo(x, y): 
} 
// パス を 閉じ る 
context.closePath( ): 
// 線 を 描画 
Context . stroke(): 
// Canvas の 状態 を 元 に 戻す 
context.restore(): 
} 
+, faqlse): 


プラ ウザ で index.html を 表示 する と 、 赤い 線 で 六角 形 が 描画 され ます 。 









= 記 ョ IE 下 多角 形 を 描画 する に は 角度 か ら X 座 標 と Y 座 標 を 求め る 


多角 形 を 描画 する に は 、 角度 か ら X 座 標 と Y 座 標 を 求め 、 直線 で つなぎ ます 。 五角 
形 で あれ ば | 360 度 =5=72] で 、 角度 を 72 度 ずつ 変化 させ 、 X 座 標 と Y 座 標 を 求め ます 。 
角度 か ら X 座 標 と Y 座 標 を 求め る に は 、 次 の よう に な り ま す 。 











var rad = 角度 * Math.PI / 189: 
var x = 半径 * Math.cosCrad): 
var y = 半径 * Math.sinCrad): 









これ で 答 ら れ た XX 座標 と Y 座 標 を 「lineTo() 」 メ ノッ ド を 使っ て パス を 作成 し 、 最後 に 
| stroke」 メ ノッ ド で 線 を 描画 し ます 。 また 、「 軸 () 」 メ ノッ ド で あれ ば 、 塗り つぶ され た 
多角 形 に な り ま す 。 






LIE9 1 Chrome 1 safari 5 】 Firefox 4 1 Opera11 | iOS4 」 Android2 1WP 





SE TIN-19 ウ 


角 丸 四角 形 を 所 く 


ここ で は 、 角 丸 四角 形 を 描く 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 





ロ | 


L 


ら 品 | 


<!DOCTYPE html> me 
<html> M 
<head> 
<meta charset="utf-8"> I ロ 
<tttle>Sample</tttle> * 
<scrtpt src="]s/sample .]S"></scrtpt> ロ 
</head> H 
<body> ロ 
<canvos wtdth="329" hetght="249"> 日 
Canvas 対 応 ブ ラウ ザ を 使用 し て 下さ い ロ 

| 3] 


</CanVQS> 
</body> 
</html> 


JavaScript の コー ド (sample.j8) 


window.addEventLtstener("1oad" , functton(){ 
// Canvos 要 素 を 読み 出し 
var myCanvas = document.getEtementsByTagName("cqnvas" う [9]: 
// コン テキ スト を 取得 
var context = myCanvas .getContext("2d"): 
tf (!context){ return: } 
// 線 の 色 と 幅 を 設定 
context.ltneWidth = 4: 
context.strokeStyte = "red": 
// 角 丸 四角 形 を 描く 。 xy, 横幅 , 縦 幅 , 角 丸 半 位 
drawRoundRectCcontext, 49, 39, 299, 179, 29): 
// 角 丸 四角 形 を 描く た め の 関 数 
functton drawRoundRect(context, x,y, W, h, r){ 
// 幅 の 小さ い 場 合 と 大 きい 場合 で 半径 を 調整 
tf (w<h)+ 
tf (Cw/2) < r) ほ fr=w/25 は} 
+elset 
tf (Ch/2) < rtr=h/2)} 
} 
// 新規 パス を 作成 
context.begtnPath(): 
// 左上 に 移動 
context.moveTo(x+r。 y): 
// 直線 と 角 丸 を 描く 
context.1ineTo(Cx+W-P, yY): マ | 


sg sg 
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mm 王 ロ 丁 | 口 N -199 m 角 丸 四角 形 を 描く 


context.grc(x+w-r。 y+r, PF, -Moth.PI/2, の, fgqlse): 4 
context.LtneTo(x+w。 y+h-r): 
context.qrc(Cx+W-r。 y+h-r。r, 9, Math.PI/2, faqlse): 
context. LtneTo(x+r。 y+h): 
Context.qrc(x+r。 y+h-r、r, Math.PI/2, Mgth.PI, false): 
context.LtneToCx , y+r): 
context.qrc(Cx+P。 y+P, 『。 Math.PT, -Math.PT/2., fatse): 
// パス を 閉じ る 
context.closePath( ): 
// 線 を 描く 
Context.stroke( ): 
} 
}, false): 


フラ ウザ で index.html を 表示 する と 、 赤い 線 で 角 丸 四角 形 が 描画 きれ ます 。 





角 丸 四角 形 を 描画 する に は 
還 細 彰 還 納 議 [ineTo()」 メ ソ ッ ド と 「arc()」 メ ソ ッ ド を 組み 合わ せる 


角 丸 四角 形 を 描画 する に は 、 直線 を 描く 「jineTo() 」 メ ノッ ド と 角 丸 部 分 を 描画 する 
| arc() 」 メ ソノ ッ ド を 組み 合わ せま す 。 canvas で は パス を 作成 する こと が で きる の で 、 これ 


を 利用 し ます 。「moveTo()」 メ ノッ ド 、「lineTo() 」 メ ノッ ド 、「arc () 」 メ ノッ ド を 順番 に 組 
み 合 わせ て 角 丸 四角 形 に な る よう に パス を 作成 し ます 。 作 成 し た パス は 「stroke() | メ ノ ッ 
ド で 線 だ け の 角 丸 四角 形 を 描画 、「 仙 () 」 メ ノッ ド で 塗り つぶ され た 角 丸 四角 形 を 描画 
する こと が で きま す 。 





| IE9 1 Chrome 1 Safari 5 】 Firefox 4 1 Opera11 1 iOS4 | Android4 1WP_ 


に 1ImgglmlN ン 1mlm 
ドー ナツ な どの 中 を くり 抜い た 図形 を 畠 く 


ここ で は 、 ド ー ナ ツ な ど 中 を < り 抜 いた 状態 の 図形 を 描く 方 法 に つい て 解説 し ます 。 | 
HTML の コー ド (index.html) 還 


<!DOCTYPE html> 








<html> 民 
<head> 軸 
<meto charset="utf-8"> 回 
<titte>SqmpLe</tttle> | 
<scrtpt src="]s/sample .]S"></SCrtDt> 回 
</head> | 
<body> I ロ 
<cqnvas width="329" hetght="249"> 還 
Canvgs 対 応 ブ ラウ ザ を 使用 し て 下さ い 記 
</CanVQS> 朋 
</body> に 
</html> 


| 
| 


らら 各 提 


JavaScript の コー ド (sample.jS) 


wtndow.gddEventListener("1oqd" , functton(){ ny 
// Caqnvas 要 素 を 読み 出し 
Var mmyCanVQaS = document .getEtementsByTagName( "canvas")[9]: 
// コン テキ スト を 取得 
var context = myCanvas .getContext("2d"): 
tf (!context){ return: } 
// 線 の 色 と 幅 を 設定 
context.1ttneWidth = 4: 
context.ft1LStyle = "red": 
// ドー ナツ 型 を 描く 。 xy, 外側 の 半径 , 内 側 の 半 答 
drawDoughnut(context, 169, 129, 199, 49): 
// ドー ナツ 型 を 描く た め の 関 数 
function drawDoughnutCcontext, x, y, OutR, tnR)+ 
// 新規 パス を 作成 
context .begtnPath(): 
// 外側 の 円 を 描く 
context.arc(x。y, outR 9, Math.PI*2, faqtse): 
// 内 側 の 円 を 描く ( 反 時 計 回 り ) 
context.arc(x。y, 1nR, 9, Math.PI*2, true): 
// パス を 閉じ る 
context.closePath( ): 
// 線 を 描く 
context.ft11(): 
} 
+, false): 


や 
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mm ビビ TI ロロ NI-2 ロ ロ mw ドー ナツ な どの 中 を くり 抜い た 図形 を 描く 


プラ ウザ で index.html を 表示 する と 、 赤 く 塗 りつ ぶさ れ た ドー ナツ 型 の 図形 が 描画 され ます 。 


= ココ = に 中 中 を くり 抜い た 図形 を 描く に は パス の ベク トル を 考慮 する 


ドー ナツ 型 の よう に 中 を くり 抜い た 図形 を 描く に は 、 パス の ベク トル を 考慮 し ます 。 
Canvas で は 作成 し た パス の 向き (ベク トル の 向き ) が 逆 方 向 の 場合 、 重なっ た 部 分 が くり 
抜か れ ま す 。 これ を 偶 奇 規則 (ワイ ン デ ィング ルー ル ) と いい ます 。 

| arc メソ ッ ド の 場合 は 、 最後 の パラ メー タ に よっ て 描画 方 向 ( ベ クト ル ) を 指定 する 
こと が で きま す 。 これ を 利用 する こと で 、 ペク トル の 向き を 変え て 2 つの 円 を 重なる よう に し 
て 半 儲 だ け 変え て れ ば 、 ド ー ナ ツ 型 を 描画 する こと が で きま す 。 





mm 四 四 上 較 和 ハ nOrid で の 不具 合 


Android 20 一 4.0 の 標準 プチ ウザ で は 、「arc() 」 メ ノッ ド で の 時 計 回 り / 反 時 計 回 り の 
指定 は 無視 され ます 。 この た め 、 ベク トル の 向き に よっ て くり 抜く (ドー ナツ 型 な ど ) こ と は で 
きま せん 。 Android 4.1 以 降 の 標準 プラ ウザ (Chrome for Android) や Firefox な ど 、 
他 の プラ ウザ な ら 正 し く 処理 され ます 。 








| IE9 | Chrome Safari 5 | Firefox 4 1 Opera11 1 OS4 」 Android2 1WP」 





還 を に し 11EN・ の は 1 


色 と 線 の スタ イル を 設定 する 


ここ で は 、 色 と 線 の スタ イル を 設定 する 方 法 に つい て 解説 し ます 。 


= まや 中 - 寺 中 = 時 HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<ttt1e>Sampte</t1t1e> 
<scrtpt src="]S/sqmple .]S"></SCr1Dt> 

</hegd> 

<body> 
<canvas width="329" hetght="249"> 

Canvas 対 応 ブ ラウ ザ を 使用 し て 下さ い 

</CqanVQS> 

</body> 

</html> 


JavaScript の コー ド (sample.jS) 


window .qddEventListener( "1oad" 。 functton(){ 
var ele = document.getELementsByTagName( "output")[9] : 
// Canvas 要 素 を 読み 出し 
var myCanvaSs = document . getEtementsByTagName("canvas")[9]: 
// コン テキ スト を 取得 
var context = myCanvos.getContext("2d") う : 
tf (!context){ return: } 
// 線 の 色 と サ イズ 、 塗り の 色 を 設定 
context.strokeStyle = "rgba(255,9,.9, 9.75)": 
context.ttneWtdth = 8: 





context.fil1Style = "cyan': 
// パス で 四角 形 を 描く 
context.beginPath(): 
context.rect(29,29, 289,200): 
context.closePoth(): 
context.ft11(): 


AG/ 有 5 SBAUBO/SBAUE^) EE ま 盾 EN:4 


context . stroke( ): 
+, false): 
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mm 王 ビビ TI ロト NN -2 ロ 1 wm 色 と 線 の スタ イル を 設定 する 


プラ ウザ で index.html を 表示 する と 、 色 と 線 の スタ イル が 設定 され た 四角 形 が 描か れ ま す 。 





mas 引 スタ イル の 指定 を 行う に は 「strokeStyle」 プロ パテ ィ を 使う 


パス で 構築 され た 図形 の 線 の スタ イル を 設定 する に は 、「strokeStyle」 プロ パテ ィ に カ 
ラー 名 や カラ ー コ ー ド を 指定 し ます 。 色 は 、 CSS3 で 指定 で きる 形式 を 使用 で きま す (887 
ペー ジ 参 照 )。 

線 で な く 、 塗り つぶ し スタ イル を 設定 する に は 、 | jStyle」 プロ パテ ィ に カラ ー 名 や カ 
ラー コー ド を 指定 し ます 。「 操 Style」 プロ パテ ィ も 、「strokeStyle」 プロ パテ ィ と 同様 に 、 
CSS3 で 指定 で きる 形式 を 使用 で きま す 。 
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| IE9 1 Chrome Safari 5 | Firefox 4 1 Opera11 1 iOS4 1 Android2 1WP_ 





旨 所 TIHN-2 口 2 


不透明 度 を 設定 する 





| 口 
ここ で は 、 不透明 度 を 設定 する 方 法 に つい て 解説 し ます 。 ~ 
HTML の コー ド (index.html) トド 
<!DOCTYPE html> La 
<html> 9 
<head> |_ 
<meta charset="utf-8"> ロ 
<ttt1le>Sample</tttle> 思 
<scrtpt src="]s/sqmple .]S "></SCrtDt> ロ 
</head> 
<body> 
<canvas wtdth="329" hetght="249"> 
Canvgs 対 応 ブ ラウ ザ を 使用 し て 下さ い I ロ 
</canvas> ド 
</body> に 面 
</html> | 軸 
| 
ロ 


JavaScript の コー ド (sample.js) lo 


window . addEventLtstener("toad" , functiton( う も 
vgr ele = document .getElementsByTagName("output")[9]: 
// Canvas 要 素 を 読み 出し 
var myCanvas = document.getEtementsByTagName("canvas")[9] : 
// コン テキ スト を 取得 
var context = myCanvas .getContext("2d"): 
tf (!context){ return: } 
// 全体 の 不透明 度 を 設定 
context.globalAtpha = 9.25: 
// 塗り の 色 を 設定 
context.fit1LStyle = "red": 
// 四角 形 を 描画 
context.ftLLRect(59, 59, 159, 159): 
// 塗り の 色 を 設定 
context.fi1t1LStyle = "blue": 
// 四角 形 を 描画 
context.ftLLRect(199, 199, 159, 159): 
+, fatse): 
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mm 司 ビビ ピロ T「 口 N-2 ロ 2 ョ mW 不透明 度 を 設定 する 


プラ ウザ で indexhtml を 表示 する と 、 半 透 明 に な っ た 赤色 の 四角 形 と 青色 の 四角 形 が 表 
示さ れ ま す 。 重なっ た 部 分 は 、 赤 と 青 の 半 透 明 で 描画 され て いま す 。 





= に ョ = 不透明 度 の 指定 を 行う に は 「globalAlpha」 プロ パテ ィ を 使う 


不 穫 明 度 を 指定 する に は 、 コン テキ スト の 「globalAlpha」 プロ パテ ィ に [00」-「10| ま 
で の 値 を 設定 し ます 。「00」 が 完全 な 透明 、[10」 が 完全 な 不透明 に な り ま す 。 | global 
Alpha」 を 設定 する と 、 以 後に 描画 され る 図形 は 、 す べ て 影響 を 受け ます 。[「gobalAlpha | 
プロ パテ ィ で 設定 し た 値 を 元 に 戻す 場合 は 、「save() 」 メ ノド と 「restore() 」 メ ノッ ド を 利用 
し ます 。「save0」 メ ノッ ツ ド は 、 直前 の 不透明 度 も 保存 し て お く こ と が で きる た めで す 。 

また 、 全 体 の 不 郁 明 度 で は な く 、 一 部 だ け に 適用 し た い 場 合 は 、 | Style」 プロ パテ ィ 
か | strokeStyle]」 プ ロ パ ティ に 、「rgba () 形式 で 色 と 不 透明 度 を 一 括 で 指定 し ます 。 









LIE9 1 Chrome 1 Safari 5 Firefox 4 1 Opera 11 』 OS4 」 Android2 1WP_ 


に 1 ゴ ImmglmlNB ン ml に 
所 画 モー ド を 設定 する 


ここ で は 、 描画 モー ド を 設定 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<title>SampLe</t1tle> 
<SCrtDt src="]S/sqmple .]S"></SCrtpt> 
</head> 
<body> 
<cgnvos wtdth="329" hetght="249"> 
Canvoas 対 応 プ ブラ ウザ を 使用 し て 下さ い 
</canvaS> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 
wtndow . qaddEventLtstener("toqgd"。 functton()+ 
// Canvas 要 素 を 読み 出し 
var myCanvas = document.getEtementsByTagName("canvas")[9] : 
// コン テキ スト を 取得 
var context = myCanvos .getContext( "2d") う : 
tf (!context){ return: } 
// 赤色 に 設定 
context.f1tlLStyLe = "red": 
// デフ ォ ル ト の モー ド (source-over) で 四角 形 を 描画 
context.fttLLRect(19,29, 299, 189): 
// 緑色 に 設定 
context.ftllLStylLe = "# の 9ffO0": 
// 描画 モー ド を tighter に 設定 
context.globatCompositeOperatton = "ltghter": 
// 四角 形 を 描画 
context.ftLLRect(99, 69, 299, 189): 
}, false): 


ブラ ウザ で index.html を 表示 する と 、 lighter の 描画 モー ド で 赤い 四角 形 と 緑色 の 四角 形 
を 描画 きれ ます 。 重なっ た 部 分 は 、 合成 され た 明る い 色 (黄色 ) で 描画 きれ て いま す 。 





人 ハハ G/(]15 SBAUB)/SBAUE バ ) 還 だ に き 上 こ に 4 ミト ea 
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m ビ ロイ TI 口 N! -2 ロ ロコ m 描画 モー ド を 設定 する 





指 画 モー ド の 指定 を 行う に は 
ント [gobalComposite0Uperation」 プロ パテ ィ を 使う 





指 画 モー ド を 指定 する に は 、 コ ン テ キ スト の | globalCompositeOperation 」 プロ パテ ィ 
に 、 次 の 表 に 示す 文字 列 を 指定 し ます 。 描画 モー ド を 設定 し た 際 、 プラ ウザ に よっ て 結 
果 が 異な る こと が あり ます 。 


説明 
デフ ォ ルト ) 





















背景 は その まま で 背景 と 前 景 が 重なっ た 部 分 


だ け に 前 景 を 描画 
背景 と 前 景 が 重なっ た 部 分 だ け に 前 景 を 描画 
背景 が 重なっ て いな い 部 分 だ け に 前 景 を 描画 

育 景 と 前 景 が 重なっ た 場合 、 重なっ た 部 分 に 


destinatiOn-atODp 背景 を 描画 


背景 と 前 景 が 重なっ た 部 分 だ け に 背景 を 描画 
背景 と 重なっ た 部 分 は 前 景 を 描画 し な い 
背景 と 前 景 が 重なっ た 部 分 は 描画 され な い 


それ ぞ れ の 文字 列 を 指定 し た 場合 の 結果 は 、 次 の 図 の よう に な り ま す 。 












@) 広 ⑯) SOUTCe-OVE「( デ フォ ルト ) 
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描画 モー ド を 設定 する 


⑯ SOU「CG- ヨ tOD ⑯) SOU「CB-In 





SOUTCG-Out deStinatiOn-atOD 


人 【 前 景 





eStinatiOn-In deStinatiOon-Out 





⑯ deStinatiOn-OVer ⑯|Ighter 


G 八 ご /(] ら SBAUBO/SBAUEX) 
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LIE9 』Chrome Safari 5 Firefox 4 | Opera 11 1 iOS 4 I Android2 1WP 


二 1 = 間 軒 人 関 男 に ルン 1 田 ピ ン 


クリ ッ ピ ング する 








ここ で は 、 クリ ッ ピ ング する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta Charset="utf-8"> 
<tttle>Sample</t1t1e> 
<SCrtpt src="]S/sampte.]S "></scrtpt> 
</hegd> 
<body> 
<canvaSs wt1dth="329" hetght="249"> 
Canvos 対 応 プ ブラ ウザ を 使用 し て 下さ い 
</CanVQS> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("toad"。 function(){ 
// Canvos 要 素 を 読み 出し 
Var myCanvas = document .getELementsByTagName( "caqnvas")[9]: 
// コン テキ スト を 取得 
Var Context = myCanvas.getContext("2d"): 
tf (!context){ return: } 
// パス で 正 円 を 2 つ 作 成 し て クリ ッ ピ ング 領域 に する 
context .begtnPath(): 
context.grc(169,69, 59, 9, Math.PT*2, false): 
context .qrc(169,139, 79, 9, Math.PT*2, false): 
context.CLtD(): 
// 画像 を 描画 する 
var imgOb] = new Image(): 





人 ハハ G/5 SBAUB)/SBAUBCJ ココ ヨ エ コマ H コ 


1tmgOb].Src = "1mages/sunftower.]pg": 
1mgOb] .onload = functton(){ 
context .drowImage(thts, -79, の ): 
} 
+。fqlse): 
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箇 ビビ ロ T| 口 N!|- ラ ロイ m クリ ッ ピ ング する 


ブラ ウザ で index.html を 表示 する と 、 2 つの 円 の 中 に 画像 が 描画 され ます 。 2 つの 円 か ら は 
み 出 し た 部 分 は 描画 され ませ ん 。 


= 店 クリ ッ ピ ング 領域 の 指定 を 行う に は 「clip()」 メソッド を 使う 


クリ ッ ピ ング 領域 を 設定 する に は 、 パ ス を 構築 する メソ ッ ド (moveTo0」「ineTo0」|arc 
() 」「arcTo() 」「rect(0) 」「bezierCurveTo() 」「quadratcCurveTo0」 メ ソ ッ ド ) を 使い 
ます 。 パ ス で クリ ッ ピ ング する 領域 を 設定 し た 後に 、「 clip () 」 メ ソ ッ ド を 実行 し ます 。 こ れ に よっ 
て 、 パス 部 分 が 描画 範囲 に 設定 され ます 。 男 囲 か ら は み 出 し た 部 分 は 図形 で も 画像 で も 
描画 され ませ ん 。 

また 、 設定 し た クリ ッ ピ ング 範 囲 を 解除 する に は 、 クリ ッ ピ ング 領域 を 設定 する 前 に 、 
[save() 」 メ ノッ ド で Canvas の 情報 を 保存 し て お きま す 。 その 後 、| restore ()) 」 メ ノッ ド を 
使え ば 、 設定 し た クリ ッ ピ ング 領域 を 解除 する こと が で きま す 。 

な お 、 2012 年 の Canvas の 最新 仕様 で は 、「clip ()) 」 メ ノッ ド で 設定 し た クリ ッ ピ ング 男 
囲 を 解除 する 「resetClip ( 」 メ ノッ ド が 検討 され て いま す 。 
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LIE9 1Chrome Safari 5 | Firefox 4 1 Opera 11 1 iOS4 | Android2 | WP 」 


=1 ゴ milmIN ン im に 
文字 を 指 画 する 


ここ で は 、 文字 を 描画 する 方 法 に つい て 解説 し ます 。 
記 HTML の コー ド (index.html) 


( <!DOCTYPE html> 








| 
し ロ | 





| <html> 

ー」 <head> 

ロ | <meta charset="utf-8"> 

ーー <tttle>SampLe</t1t1e> 

| <ScrtPpt src="]s/sqmpte.]S"></scrtpt> 

| </head> 

和 9 

<canvas width="320" hetght="249"> 
コ Canvqs 対 応 プ ラウ ザ を 使用 し て 下さ い 
記 </canVQaS> 
民 Cee 

| </html> 





JavaScript の コー ド (sample.js) 


wtndow.aqddEventLtstener("1ogd" functton(){ 
// Canvas 要 素 を 読み 出し 
Var myCanvas = document .getElementsByTagName( "canvas")[9] : 
// コン テキ スト を 取得 
var context = myCanvas .getContext( "2d"): 
tf (!context){ return: } 
// フォ ント と サイ ズ を 設定 する 
context.font = "24pt "Taqhomg-Bold'": 
// 文字 の 色 を 設定 する 
context.ft1L1Style = "blLue": 
// アウ トラ イン 文字 の 線 の 色 を 設定 する 
context.strokeStyle = "red": 
// 文字 を 描画 する 
context.fttLlText("Canvas Samptle", 19, 59): 
// 横幅 を 指定 し て 文字 を 描画 する CSafart 5 は 非 対 応 ) 
context.ftllText(C"Canvas Sqmpte", 19, 199, 199): 
// アウ トラ イン 文字 を 描画 する 
context.strokeText("Canvas Sampte", 19, 159): 
// 横幅 を 指定 し て アウ トラ イン 文字 を 描画 する 
context.strokeText("Canvgs Sample", 19, 299, 199): 
+, false): 








AS/ ロ E SPAUB)/SBAUE バ ) 還 こ に き 抽 4 ミト Fe 


プラ ウザ で index.html を 表示 する と 、 Canvas に 指定 し た サイ ズ と 色 で 文字 が 描画 きれ ます 。 
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厨 司 ビ ビ ロ T 口 NN -2 ロ 5 m 文字 を 描画 する 


| Canvas Sample 
(amvas Sampk 


Camvas Sample 


し AV8 SADK 


文字 を 描画 する に は 
「fillText()」 メソッド や 「strokeText()」 メ ソ ッ ド を 使う 


文字 を 描画 する に は 、「 負 Text() 」 メ ソ ッ ド 、 ま た は 、| strokeText() 」 メ ソ ッ ド を 使い ま 
す 。「 人 軸 Text() 」 は 塗り つぶ され た 文字 を 、| stroketext() 」 は 線 だ け の 文字 (アウ トラ イ 
ン 文字 / 袋 文字 ) を 描画 し ます 。「 名 Text()) 」 メ ソ ッ ド と | strokeText()」 メ ソノ ッ ド の パラ 
メー タ は 同じ で す 。 最初 の パラ メー タ が 、 描画 する 文字 列 に な り ま す 。 2 番目 が X 座 標 、3 
番目 が Y 座 標 に な り ま す が 、 Y 座 標 は 文字 の ベー スラ イン が 基準 に な り ま す 。 


ロロ NEPUOINT 


fillText(text,。 x。y, [wtdth] ) 
strokeTextCtext, x, y, [wtdth] ) 


4 番目 の パラ メー タ は 、 文字 を 描画 する 範囲 (横幅 ) を 指定 し ます (単位 は ビク セル ) 。 
横幅 を 指定 する と 、 その 範囲 内 に 文字 が 収まる よう に 調整 され ます 。 これ に よっ て 、 文字 
が 縦長 ( 長 体 ) に な り ま す 。 

な お 、Canvas 仕 様 ver 5 で は 、 パ ス 上 に テキ スト を 描画 する 機能 (| addText() 」 メ ソ ッ 
ド ) も 追加 され て いま す 。 


mm 部 IN 還 較 Safgri 5 と DDpera で の 不具 合 


Safari 5 と Opera 11.0 一 12.0 で 文字 の 捕 
画 範 囲 を 示す 横幅 を 指定 し た 場合 、 止 し く 
動作 し ませ ん 。 Safari 5 で は 指定 し た 幅 は 無 
視 さ れ 文 字 が 描画 され ます 。 Opera 11.0 一 
12.0 で は 文字 が 長 体 に な ら ず 、 男 囲 に 収まる 
よう に 正体 の まま 文字 全体 が 小さ く な り ま す 。 
な お 、 Safari 6 で は この 不具 合 は 解消 され て 
いま す 。 

















1 
IEZEEErOIE | 








Canvas Sample 






Canvas Sample 





Camvas Sample 







Canvas Sempls 


内 計 午 良三 四 用 
@ 又 字 の 幅 を 求め る … io D.47 ら 
e 又 字 の 位置 揃え を 指定 する … ド ooo p.474 
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LIE9 』Chrome | Safari 5 | Firefox 4 1 Opera 11 1 iOS4 ! Android2 1 WP 」 


=1 ヨ mMImIN Bfml= 
文字 の 幅 を 求め る 


ここ で は 、 文字 の 幅 を 求め る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metog charset="utf-8"> 
<t1tle>SgmpLe</tttte> 
<SCrtpt src="]s/sgmple .]s "></scrtpt> 

</hegd> 

<body> 
<CqnvaS wtdth="329" hetght="249"> 

Canvos 対 応 プ ラウ ザ を 使用 し て 下さ い 

</cqnVQS> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventLtstener("1ogd" , functton(){ 
// Canvas 要 素 を 読み 出し 
Var myCaqnvas = document.getElementsByTagName( "canvas")[9] : 
// コン テキ スト を 取得 
Var Context = myCanvos .getContext("2d"): 
1f (!context){ return: +} 
// フォ ント と サイ ズ お よび 色 を 設定 する 
context.font = "24pt 'Taqhoma-Bold'": 
context.fil1Style = "blue": 
// 描画 する (文字 幅 を 計算 する ) 文 字 
var text = "Canvas Saqmpte": 
// 文字 を 描画 する 
context.ftLLText(text, 19, 59): 
// 文字 の 横幅 を 求め る 
Var w = Context.measureText(text) .wtdth: 
// 結果 を 表示 する 
context.ftllText("wtdth = "+w, 19, 199): 
// 求め た 横幅 で 赤い 線 を 描画 
context.ltneWidth = 8: 
context.strokeStyle = "rgbo(255, 9, 9, 9.5)": 
context .begtnPath( ): 
context.moveTo(19,59): 
context.LtneTo(19+w, 509): 
Context. stroke(): 

}, false): 
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生 王 ロロ TI 口 N-2 ロ 6 wm 文字 の 幅 を 求め る 


ブラ ウザ で index.html を 表示 する と 、 文 字 が 描画 きれ 、 そ の 下 に 文字 の 幅 が 表示 され ます 。 
その 文字 幅 に 従っ て 、 文字 の 上 に 赤い 線 が 描画 され ます 。 


width デ 198 





文字 幅 を 求め る に は テキ スト メト リク ス オ ブ ジェ クト の 
MI [width」 プロ パテ ィ を 使う 


描画 する 文字 幅 を 求め あ に は 、 あら か じ め 、 コン テキ スト の 「font」 プ ロ パ ティ に 搬 画 する 
文字 の サイ ズ と 書体 (フォ ント ) を 設定 し て お きま す 。 次 に 、「mesureText() 」 メ ソ ッ ド を 使っ 
て テキ スト メト リク ス オ ブ ジェ クト を 取得 し ます 。 この テキ スト メト リク ス オ プ ジェ クト の | width」 
プロ パテ ィ に 、 文字 幅 が ピク セル 数 で 返さ れ ま す 。 た だ し 、 書体 (フォ ント ) に よっ て は 、 求め 
た 描画 幅 よ り も 文字 が は み 出 す 場 合 が あり ます 。 

また 、 テキ スト メト リク ス オ ブ ジェ クト に は 「width] プロパ ティ し か な く 、 文字 の 縦 幅 な ど 
他 の サイ ズ を 求め る こと は で きま せん 。 


mml 軸 に 検 対 中 の テキ スト メト リク ス の プロ バテ ィ 


テキ スト の 情報 が 横幅 し か 取得 で き な い の は 、 実用 度 に 欠け ます 。 この た め 、 次 の よ 
うな プロ パテ ィ が 検討 され て いま す 。 
ws CtualBOundingBoxLeft 




















wagCtualBoundingBoxRight 
ws fontBoundingBOxAScCent 
w fontBoundingBoxDescent 
eeGmHeightAscent 
semHeightDescent 

s hangingBaseline 
salphabeticBaseline 
wideOgraphicBaseline 


関連 項目 ゅ 
き 文字 を 描画 する 5 る 00 入る る る D. 470 
e 又 字 の 位置 揃え を 指定 する …… ド oo p.474 
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LIE9 』Chrome 1 Safari 5 | Firefox 4 1 Opera 11 | iOS4 Android2 I WP 





呈 ビ ヒロ TI ロ N- 2 ロワ 
文字 の 位置 揃え を 指定 する 


"| ここ で は 、 文字 の 位置 揃 え を 指定 する 方 法 に つい て 解説 し ます 。 
ロ HTML の コー ド (index.html) 


<!DOCTYPE html> 








同 <html> 
] <head> 
5 <metq charset="utf-8"> 
是 <title>Sampte</tttte> 
0 <SCrtDpt src="]s/sample.]S "></scrtpt> 
</heod> 
p <body> 
- <canvas width="326" hetght="249"> 
Qa Canvas 対 応 ブ ラウ ザ を 使用 し て 下さ い 
</cqnvas> 
_ ロ | St 
| </html> 
3 
9 JavaScript の コー ド (sample.js) 





ーーー wtndow.gddEventLtstener("1oqd" function){ 
// Canvas 要 素 を 読み 出し 
Var myCanvas = document.getEtementsByTagName( "canvas")[9] : 
// コン テキ スト を 取得 
Var context = myCanvas.getContext("2d"): 
tf (!context){ return: } 
// フォ ント と サイ ズ お よび 色 を 設定 する 
context.font = "24pt "Tahoma-Botd'": 
context.ftlLStyle = "blue": 
// 描画 する 文字 
var text = "Sample": 
// 文字 を 左 揃え で 描画 する 
context.textAltgn = "Left"・ 
context.ftllLText(text, 169, 59): 
// 文字 を 中 揃え で 描画 する 
Context.textAltgn = "center": 
context.ftLLText(text。 169, 199): 
// 文字 を 右 揃え で 描画 する 
context.textAltgn = "rtght": 
context.ftLLText(text。 169, 150): 
// 中 心 に 線 C 四 角形 ) を 描画 
context.ftLLStyle = "red": 
context.ftLLRect(169, 9, 1, 249): 

}, faqlse): 


gAS/ ロ e SPAUB)/SBAUB バ ) 革 こ に きき 上 に 4 ミト | 
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m 王 ビ ビビ TI ロロ N-2 ロ ワ プ m 文字 の 位置 揃え を 指定 する 


ブラ ウザ で index.html を 表示 する と 、 上 か ら 左 揃え 、 中 揃え 、 石 捕え で 文字 が 捕 画 され 、 
基準 と な る XX 座標 に 赤い 線 が 描画 され ます 。 





=mNI ヨ =ISl 画 又 字 の 位置 揃え を 指定 する に は 「textAlign] プロ バテ ィ を 使う 


文字 の 位置 揃え を 指定 する に は 、 コン テキ スト の 「textAligm」 プロパ ティ に 、 次 の 表 
に 示す 文字 列 を 設定 し ます 。「start」 | end」 は 右 か ら 左 に 描画 する アラ ビア 文字 な ど 
の 場合 に は 、「left」「right」 と は 異な っ た 結果 に な り ま す 。 | start」 を 指定 する と 、 開始 
文字 の 右側 が 基準 と な り 、 左側 に 文字 が 描画 され ます 。 | end」 は | start」 の 逆 で 、 最 
後 の 文 字 の 左側 に 文字 が 揃え られ ます 。 

左 捕 

中 揃え (セン タリ ング ) 

右 捕 

記 方 向 の 開始 点 で 揃え る 
筆記 方 向 の 終了 点 で 揃え る 













[ 






二 
届い 
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関連 項目 
e 文字 を 描画 する Io p.470 
e 文字 の 幅 を 求め る oe p.47 の 
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LIE9 』Chrome Safari 5 | Firefox 4 』 Opera 11 1 iO54 1 Android2 TIWP_ 


1 = 間 時 令 較 1 四 有 い に ル ン 1 四 ニ 


グラ デー ショ ン を 設定 する 








ここ で は 、 線形 グラ デー ショ ン と 円 形 グ ラ デ ーション を 設定 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttle>Sqmple</tttle> 
<SCrtDpt Src="]S/sqmple.]S"></scrtpt> 
</heqd> 
<body> 
<caqnvaSs wtdth="329" hetght="249"> 
Canvos 対 応 プ ラウ ザ を 使用 し て 下さ い 
</CanVQS> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("togd", functton(){ 
// Canvos 要 素 を 読み 出し 
Var myCanvaqs = document.getEtementsByTagName( "canvas ")[9] : 
// コン テキ スト を 取得 
Var context = myCanvoas .getContext("2d"): 
tf (!context){ return: + 
// 線形 グラ デー ショ ン を 設定 する 
var grgd1 = context.createLtnearGradtent(9,.9, 9, 246): 
// 開始 点 の 色 を 指定 する 
graqd1 .gddColorStop( の 9, "rgbC9,59,255)"): 
// 中 間 点 1 の 色 を 指定 する 
grad1 .gddCotorStop(9.5, "rgb(9,9,255)"): 
// 中 間 点 2 の 色 を 指定 する 
grod1 .gddColorStop(9.8, "yeltow"): 
// 終了 点 の 色 を 指定 する 
grgd1 . gddCotorStop(1, "orange"): 
// 四角 形 を グラ デー ショ ン で 描画 
context.ftlLLStyle = grad1: 
Context.ftLLRect( の 9, の 9, 329, 249): 
// 円 形 グ ラ デ ー シ ョ ン を 設定 する 
Var grgdZ = context.createRadtalGradtent(169, 129, 29, 169, 129, 1909 )・ 
// 開始 点 の 色 を 指定 する 
gradZ.qddColorStop( の 9, "rgbo(255.9,9, 9)"): 
// 中 間 点 1 の 色 を 指定 する 
gradZ.gddCotorStop(9.5, "rgba(255,9,.9, 9.5)"): 4 
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硬 王 ロ 丁 | 口 N! -2 ロ 日 mw グラ デー ショ ン を 設定 する 


// 終了 点 の 色 を 指定 する る 
grad2 . gddCotorStop(1, "rgba(255,255,255, 9.25)"): 
// 正 円 を グラ デー ショ ン で 描画 
context.ftlLLStyle = gradZ: 
context ..aqrc(169, 129, 199, 9 の, Math .PT*2, false): 
context.ftLL(): 
+, fglse): 


ブラ ウザ で index.html を 表示 する と 、 Canvas 全 体 に 線形 グラ デー ショ ン 、 中 心 に 円 形 グ ラ 
デー ショ ン が 描画 され ます 。 





同和 き 二 誰 3 ノ フ テー ショ ン を 描画 する に は 「createLinearGradient)」 メ ソ ッ ド や 
「createRadialGradient()」 メソッド を 使う 


Canvas で は 、 線形 グラ デー ショ ン と 円 形 グ ラ デ ー シ ョ ン を 描画 する メソ ッ ド が あり ます 。 
線形 グラ デー ショ ン は 、[| createLinearGradient() 」 メソ ッ ド を 使い ます 。 パラ メー タ に 
は 、 グラデ ーション の 開始 座標 と 終了 座標 を 指定 し ます 。 生成 され た グラ デー ショ ン オ プ 
ジェ クト に 色 を 設定 する に は 、|「 addColorStop 0 」 メ ノッ ド を 使い ます 。| addColorStop 
() 」 メ ノッ ド の 最初 の パラ メー タ に 、 色 の 位置 を 指定 し ます 。「0] で あれ ば 0% の 位置 、 
「0.5」 な ら 50% の 位置 、「1.0] な ら 100% の 位置 を 示し ます 。 グラ デー ショ ン オ ブ ジ ェクト を 
[Style」 プ ロ パ ティ に 設定 し た 後 で | 名) 」 メ ノッ ド を 使う と 、 図形 が グラ デー ショ ン で 
塗り つぶ され ます 。 

円 形 グ ラ デ ー シ ョ ン は 、|「 createRadialGradient() 」 メ ソ ッ ド を 使い ます 。 パラ メー タ に 
は 、 開始 座標 と 円 の 半径 、 終了 座標 と 終了 円 の 半径 を 指定 し ます 。 色 の 指定 は 、 線形 
グラ デー ショ ン と 同様 に 、「 addColorStop ) 」 メ ソ ッ ド を 使い ます 。 カラ ー は 、 サン プル の よ 
うに 、 不 左 明 度 を 利用 し た グラ デー ショ ン も で きま す 。 
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LIE9 』Chrome ! Safari 5 | Firefox 4 1 Opera11 1 iOS4 ] Android2 1 WP」 


=1 ヨ mlmINB ン im に 
画像 を 所 画す る 


| ここ で は 、 画像 を 描画 する 方 法 に つい て 解説 し ます 。 
記 HTML の コー ド (index.html) 


| <!DOCTYPE html> 
<html> 
<hegd> 
<metg charset="utf-8"> 
ーー <tttle>Sample</ttt1le> 
ロ | <SCrtpt src="]s/sqmple.]S"></scrtpt> 
</head> 
<body> ' 
| <canvaSs w1dth="329" hetght="240"> 
回 Canvas 対 応 プ ラウ ザ を 使用 し て 下さ い 
</cqnvqS> 
</body> 
</html> 


JavaScript の コー ド (sampleJs) 


wtndow . addEventLtstener("1ogd" , function(){ 
// Canvas 要 素 を 読み 出し 
Var myCqnvas = document.getEtementsByTagName( "canvas")[9] : 
// コン テキ スト を 取得 
Vaqr context = myCanvas .getContext("2d"): 
tf (!context){ return: } 
// 画像 を 描画 する 
var tmgOb] = new Imgge(): 
tmgOb].src = "1mages/sunflower.]pg'": 
tmgOb]〕.ontoad = functton(){ 
// 座標 を 指定 し て 元 の サイ ズ で 描画 
context .drawImage(thts, 9 の, 9): 
// 座標 と サイ ズ を 指定 し て 描画 
context .drawTmage(thts, の 9, 159, 59, 8 の ): 
// 元 画像 の 一 部 を クリ ッ ピ ング し た 後 で 指定 し た 座標 と サイ ズ で 描画 
context.drawTmage(thts, 39, 19, 49, 29, 199, 159, 69, 8 の ): 
} 
+, fglse): 
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還 王 ピ TI ロ N-2 ロ 9 m 画像 を 描画 する 


ブラ ウザ で index.html を 表示 する と 、 3 つの 画像 が 描画 きれ ます 。 それ ぞ れ 元 の サイ ズ 、 
位置 と サイ ズ を 指定 、 画像 の 一 部 を ビッ クア ッ プ し て 描画 し て いま す 。 


mNI ヨ slNl 画 画像 を 描画 する に は 「drawlmage()」 メソッド を 使う 


Canvas に 画像 を 描画 する に は 、| drawImage() 」 メ ノッ ド を 使い ます 。 | drawImage () 」 
メソ ッ ド は 、| 位置 を 指定 し て 元 の サイ ズ で 捕 画 | 位置 と サイ ズ を 指定 し て 搬 画 ]| 元 画像 
の 一 部 を クリ ッ ピ ング (切り 抜き ) し た 後 、 指定 し た 位置 と サイ ズ で 描画 ] の 3 種類 で 画像 を 
画す る こと が で きま す 。 それ ぞ れ 指定 する パラ メー タ は 、 次 の よう に な り ま す 。 

⑯ 座標 を 指定 し て 元 の サイ ズ で 描画 


drawImage(1mage, x。 y) 


@ 座標 と サイ ズ を 指定 し て 描画 
drawImage(tmage, x, y, wtdth, hetght) 


@) 元 画像 の 一 部 を クリ ッ ピ ング し た 後 で 指定 し た 座標 と サイ ズ で 指 画 
draqwImage(1mage , SOurceX。 sourceY , SourceWidth, sourceHetght, desttnattonX, desttnattonY , 


destinattonWidth, desttnattonY) 


な お 、 描画 する 画像 は 、 あらかじめ 読み 込ま れ て いな いと いけ ませ ん 。 読み 込ま れ て いな 
い 場 合 は 、 何 も 描画 きれ ませ ん 。 また 、DOM 上 に ある 「img」 要 素 を 指定 する こと も で きま す 。 
映像 を 描画 する 場合 は |「video」 要 素 、Canvas に Canvas を 描画 する 場合 は 「canvas」 妥 素 
を 指定 し ます 。 

た だ し 、 Android 16 一 4.0/jOS 5 で | drawImage( 」 の 最初 の パラ メー タ に | video」 
要素 を 指定 し て も 、 期待 通り に 映像 は 描画 され ませ ん 。 
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LIE9 1 Chrome 1 Safari 5 | Firefox 4 Opera 11 1 iOS4 | Android2 


ら BEUTIUHN-21 ロ 


グレ ー ス ケー ル 画 像 に する 








ここ で は 、 Canvas に 表示 され て いる ピク セル を 操作 し グレ ー ス ケー ル 画 像 に 方 法 に つい て 
解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq Charset="utf-8"> 
<tttte>Sqmplte</tttle> 
<SCr1Dpt Src="]S/sample .]S"></sCcrtDt> 
</head> 
<body> 
<form> 
<tnput type="button" vatue=" グ レー スケ ー ル に 加工 "id="effect"> 
</form> 
<canvaSs wtdth="329" hetght="249" style="border:1px solitd blaqck" "> 
Canvgs 対 応 プ ブラ ウザ を 使用 し て 下さ い 
</CqnVqS> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.gddEventLtstener("toad" 。 functton(){ 
// Caqnvos 要 素 を 読み 出し ZD コン テキ スト を 取得 
Var myCanvas = document.getELementsByTagName( "canvas ")[9] : 
var Context = myCanvas .getContext( "2d"): 
// 描画 を 描画 する 
var tmgOb] = new Image(): 
tmgOb].src = "1mages/sampte.]pg": 
tmgOb] .onlogd = functton(){ 
// 画像 が 読み 込ま れ た ら Canvqs に 描画 
context .drawImage(thts, 9, 9, myCanvos .wtdth, myCanvas . height): 
} 
// ボタ ン に イベ ント を 割り 当て 
document .getElementById("effect").aqddEventListener("cLtck"。functton(){ 
// グレ ー ス ケー ル に 変換 する 関数 を 呼び 出す 
toGray(context, myCanvas .wtdth, myCanvos . hetght): 
}。 fgqlse): 
// グレ ー ス ケー ル に 加工 する 関数 
functton toGray(context。w。h){ 
// Cgnvags 内 の ピク セル デー タ を 読み 出す 
Var PtxelDatqa = context .getTmageData( の 9.9, w, h).datqa: 


四 己 ロ 丁 | 口 N!-2 1 口 m グレ ー ス ケー ル 画 像 に する 


// 縦 方 向 の ピク セル 数 だ け 繰 り 返 す 人 
for(var y=9: y<h: y++){ 
// 横 方 向 の ピク セル 数 だ け 繰 り 返 す 
for(var x= の 9: x<W: X++)† 
// 処理 する ピク セル の 配列 内 で の 位置 を 計算 する 
// 配列 要素 は 「 赤 」「 緑 」「 青 」「 不 透明 度 (c )」 の 順番 
var potnter =(y*w+xX)*4: 
// 色 デ ー タ を 読み 出し 
var red = ptxelData[potnter+9] : 
var green = PixelData[potnter+1] : 
var blue = ptxelData[potnter+2] : 
var glpha = pixelDatag[potnter+3] : 
// 緑 X9.6+ 赤 X9.3+ 青 X9.1 で 計算 (お お ま か に 計算 ) 
var gray = Math.ftoor(green* の 9.6+ red* の.3+blue * 9.1): 
// 計算 結果 を 配列 に 入れ る 。 同じ 輝度 に する と グレ ー に な る 
ptxelData[poitnter+9] = gray: 
ptxelData[potnter+1] = gray: 
ptxetData[potnter+2] = groay: 
ptxelDota[potnter+3] = qalpha: 
} 
} 
// 処理 結果 を Canvas に 描画 する た め に 新規 に ビ ピク セル デー タ を 生成 
var output = context.CreateImageData(w,h): 
// ピク セル デー タ の 総数 だ け 繰 り 返 す 
for(Cvar 1=9: 1t<w*h*4・ エ ++){ 
// 操作 し た ピク セル を 入れ る 
output . data[1] = pixelData[1] : 
} 
// Caqnvas に 描画 する 
context . DutTmageData(output, 9,09): 
} 
}, faqlse): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 Canvas に 描画 され て いる 画像 が 
グレ ー ス ケー ル 画 像 に 加工 され て 表示 され ます 。 





481 


5 人 ハハ 6/6 SBAUBO/SBAUB) に に WE に 4 ェ 


L ロ 


| 語 
| 和 








人 ハ G/C SBAUBO/SBAUB) に き 間 ENy4 =im 


482 


還 司 ビ ロ T| 口 NN -2 1 口 m グレ ー ス ケー ル 画 像 に する 









グレ ー ス ケー ル 画 像 に する に は 
ピク セル デー タ を 読み 出し て 計算 式 に 従っ て 変換 する 


Canvas に 描画 され て いる 画像 を 加工 し て グレ ー ス ケー ル 画 像 に する に は 、 ピク セル 
デー タ を 読み 出し 、 計算 式 に 従っ て 変換 し ます 。 ビク セル デー タ は 、| getImageData() 」 
メソ ッ ド を 使っ て 呼び 出し た オブ ジェ クト の | data」 プロ パテ ィ に 配列 と し て 格納 され て いま 
す 。 この 配列 に は 、 色 の 輝度 が | 赤 」| 緑 」| 青 」| 不透明 度 (z)」 の 順番 で 格納 され て 
いま す 。 

グレ ー ス ケー ル に する に は 、| 緑 X0.6+ 赤 X0.3+ 青 x0.1」 で 計算 し ます (グレ ー ス ケー ル 

の 変換 ae こも ある が 、 ここ で は 最も 省略 され た 計算 式 を 使っ て いる ) 。 計算 し た 

結果 が 輝度 に な る の で 、 赤 青 緑 の 輝 度 と し て 再度 、 配列 に 代入 し ます 。 

PP その まま で は Canvas 上 に は 反映 され ませ ん 。 そこ で [create 
ImageData() 」 メ ソ ッ ド を 使っ て Canvas と 同じ サイ ズ の ビク セル デー タ ( 配 列 ) を 作成 し 、 
そこ に 処理 済み の デー タ を 入れ て いき ます 。 

最後 に | putlmageData (0 」 メ ソ ッ ド を 使っ て Canvas に 描画 を 行い ます 。 こ れ で Canvas 
に グレ ー ス ケー ル に 変換 し た 画像 が 描画 され ます 。 


mml 紀 BIN 識 一 力 ル ディ スク 上 で の 動作 に つい て 


ロー カル ディ スク 上 で は 動作 し な い ブ プラ ウザ が あり ます 。 また 、 サー バー 上 に ある 画像 
は 処理 で きま す が 、 ロー カル デイ スク 上 に ある 画像 を Canvas に 描画 し た 場合 、 そ の 画像 
の ビク セル デー タ は 読み 出せ な いこ と が あり ます (プラ ウザ に よる が 、 セキ ュ リ ティ エラ ー に 
な る こと が ある )。 





NEPO ロ INT 





























生 王 ビ ビビ TI ロロ NI-21 口 m グレ ー ス ケー ル 画 像 に する 


mm 章 WN 還 較 八 け 時 する 画像 が 大 きい 場合 


大 きい サイ ズ の 画像 を 処理 する 場合 、 処理 に 時 間 が か か り 、 プラ ウザ が 何 も 操 作 で き 


な く な っ て し まう 場合 が あり ます 。 この よう な 場合 は 、 並列 処理 を 行う Web Workers を 使 
用 し ます 。 な お 、 Android 2、 Windows Phone の 場合 は 、 UI 操作 を 行う 処理 は 別に 動 
作 す る た め 、 画像 処理 中 で も ブラ ウザ の 操作 を 行う こと が で きま す 。 


mm 画 和 IN 靖 Safari 6 と Retina Display の 場合 


Safari 6 が 高 解像度 の Retina Display 上 で 動作 し て いる 場合 、 サン プル を 実行 する 
と ビク セル が 右 下 に ずれ る こと が あり ます (0.5px ほ ど 、 ずれ る ) 。 








抽 議 下 三 年 必 2 


な エン ボス 加工 する 2 人 4 肖 や で 洲本 も 光る まる 人 宙 抽 湯 光り p.484 
人 の 画像 を ぼかす が る 福江 和光 06 p.488 
e 画像 の ガン マ 補 正 を 行う oo p.492 
e 画像 を 白黒 化 (2 値 化 ) す る … 旋 ビ に ドド orrtimliltltltt p.495 
e 画 を 特定 の 色相 (トー ン ) に する ………… バ バド バー バン ババ p.499 
e 要素 に グレ ー フ ィ ル タ を 適用 する …|( ぐ (l 客 ee p.954 
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6) 八 G/ SBAUBO/SBAUB) コ ヨ ュ に ニトロ 





| sl 


1 





と | 


LIE 9 』Chrome 』 Safari 5 | Firefox 4 』 Opera 11 | iOS4 | Android2 」 





EE まま LIN この 1 】 
エン ボス 加工 する 


ここ で は 、 Canvas に 表示 され て いる ビク セル を 操作 し エン ボス 加工 する 方 法 に つい て 解説 
し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<tttte>Sqmple</tit1e> 
<SCrtpt src="]S/sample .]S "></sCrtpt> 
</head> 
<body> 
<form> 
<tnput type="button" vatue=" エ ン ボ ス 加 工 "id="effect"> 
</form> 
<canvaSs width="329" hetght="249" style="border:1px soltd blgck""> 
Canvas 対 応 プ ラウ ザ を 使用 し て 下さ い 
</canVqS> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oqd", function(){ 

// Cqnvogs 要 素 を 読み 出し ZD コン テキ スト を 取得 

var myCanvoas = document.getEtementsByTagName("canvas")[9] : 

var context = myCanvos . getContext( "2d"): 

// 描画 を 描画 する 

var tmgOb] = new Image(): 

tmgOb].src = "1mages/sqmple.]pg": 

tmgOb].onlogd = functton(){ 
// 画像 が 読み 込ま れ た ら Canvas に 描画 
context . drawTmage(thts, 9, の): 

} 

// ボタ ン に イベ ント を 割り 当て 

document .getEtementById("effect").addEventLtstener("click"。functton(){ 
// エン ボス に 変換 する 関数 を 呼び 出す 
toEmboss(context, myCanvas .wtdth。myCanvas . hetght): 

},。 fatse): 

// エン ボス に 加工 する 関数 

functton toEmboss(Ccontext。w。h){ 
// Cqnvqs 内 の ピク セル デー タ を 読み 出す 
var ptxelData = context.getTmageData(9,9, w。h).datg: 


加 司 ビ ロ T| 口 N! - ら ] 1] mw エン ボス 加工 する 


// 縦 方 向 の ピク セル 数 だ け 繰 り 返 す 双 
for(var y=h-1: y>= の 9: y--){ 
// 横 方 向 の ピク セル 数 だ け 繰 り 返す 
forCvar x=w-1: x>=9: X--)† Ne 
// 処理 する ビク セル の 配列 内 で の 位置 を 計算 する に 
// 配列 要素 は 「 赤 」「 緑 」「 青 」「 不 透明 度 ( e )」 の 順番 


! 
var potnter =(y*w+xX)* 4: | 
// 差分 を 取る ピク セル の 位置 を 設定 する ま 
VOP X の =X- の : 5 
var y2 = y - 2: トニ 
// 画面 外 に な ら な いよ うに 調整 する Iq 
tf Cx2 < の { x2 = 9: } 
if 2 < の { y2 = 9: } 回 
var potnterLeft = (y2* w+ x2) * 4: 敵 
// 色 デ ー タ を 読み 出し lg 
var red = pixelData[potnter+9] : 負 
var green = pixelData[potnter+1] : 
var blue = ptxelData[potnter+2] : * 
var glphag = ptxelData[potnter+3] : ei 
var red2 = ptxelData[potnterLeft+9] : 10 


var green2 = ptxelLData[potnterLeft+1] : 
var blue2 = ptxelData[potnterLeft+2] : 
// 差分 を 求め る に 
var r = Math.floorCCredZ - red)/2)+128: 

var g = Math.ftloor((green2 - green)/2)+128: 

var b = Math.ftoor(Cblue2 - blue)/2)+128・ 

// グレ ー に し た い 場 合 は 以下 の コー ド 

// var gray = green* の 9.6+red* の .3+bLue* の .1・ 

// var gray2 = greenZ* の .6+redZ* の .3+bLue2* の .1: 
//varr=g=b= Math.floor((gray2 - gray)/2)+128: 
// 処理 結果 を 配列 に 入れ る 

ptxelData[potnter+9] = r: 





ptxelDgta[potnter+1] = gi: 
ptxelData[potnter+2] = b: 
ptxelDogta[po1nter+3] = qlpha: 
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} 
// 処理 結果 を Convas に 描画 する た め に 新規 に ピク セル デー タ を 生成 
var output = context.cregteTmageData(w, h): 
// ピク セル デー タ の 総数 だ け 繰り 返す 
forCvar 1= の 9: 1<w*h*4・ 1 ユ ++)† 
// 操作 し た ビ ピク セル を 入れ る 
output. data[1] = pixelData[1] : 
} 
// Canvas に 描画 する 
context . putTmageData(output。 の ,9): 
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+, fatse): | 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 Canvas に 描画 され て いる 画像 が 
エン ボス 加工 され て 表示 され ます 。 





miNisINm 下 エン ボス 加工 する に は ら つ の ピク セル の 輝度 の 差分 を 取る 


Canvas に 描画 され て いる 画像 を 加工 し て エン ボス に する に は 、 2 つの ピク セル の 輝度 

の 差分 を 取り ます 。 差分 を 2 で 割っ た 後に 、 オフ セッ ト 値 を 加算 し ます 。 Canvas で は [0 
ンー「 52555 で の 煙 度 の 範 囲 な の で 、 中 間 の 値 で ある 「128」 を 加算 し ます 。 

また 、 完全 な グレ ー ス ケー ル で の エン ボス 加工 を 行う 場合 に は 、2 つ の ビク セル の 輝度 
か ら グ レー スケ ー ル 値 を 求め 、 そ の 差分 を 取り ます 。 求め た 値 を 2 で 割り 、 128 を 加算 す 
れ ば グレ ー ス ケー ル で の エン ボス 画像 に な り ま す 。 
な お 、 ビク セル 操作 に 関し て は 、 480 ペ ー ジ を 参 H 










am し て くだ さい 。 


mml 瑞 に 間 較 一 力 ル ディ スク 上 で の 動作 に つい て 


ー カ ルディ スク 上 で は 動作 し な い プ ラウ ザ が あり ます 。 また 、 サー バー 上 に ある 画像 
は 処理 で きま す が 、 ロー カル ディ スク 上 に ある 画像 を Canvas に 描画 し た 場合 、 そ の 画像 
の ビク セル デー タ は 読み 出せ な いこ と が あり ます (プラ ウザ に よる が 、 セキ ュ リ ティ イエ ラー に 
な る こと が ある )。 










天 呈 己 ピロ 丁 | 口 ト ! - 2 ] 1] m エン ボス 加工 する 


miml 間 IN 細 較 作曲 す る 画像 が 大 きい 場合 


大 きい サイ ズ の 画像 を 処理 する 場合 、 処理 に 時 間 が か か り 、 プラ ウザ が 何 も 操 作 で き 
な く な っ て し まう 場合 が あり ます 。 この よう な 場合 は 、 並列 処理 を 行う Web Workers を 使 
用 し ます 。 な お 、 Android 2、 Windows Phone の 場合 は 、 UI 操作 を 行う 処理 は 別に 動 
作 す る た め 、 画像 処理 中 で も ブラ ウザ の 操作 を 行う こと が で きま す 。 






関連 項目 


ゅ グリ ー ス ケー ル 画 像 に する む や や ドー トド ドド トド ドド ドド p.480 
e 画像 を ぼかす ドド ir p.488 
e 画像 の ガン マ 補 正 を 行う …… ひ の … ド ドド ドド rr p.492 
e 画像 を 白黒 化 (2 値 化 ) す る … 〇 ……… ド ドド iror…… p.495 
e 画像 を 特定 の 色相 (トー ン ) に する ……… ド ドド p.499 
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画像 を ぼかす 


ここ で は 、 Canvas に 表示 され て いる 画像 を ぼかす 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<tttle>Sample</t1t1e> 
6 | <Scrtpt src="]S/sqmple.]S"></scrtpt> 
</head> 
ロ | <body> 
<form><tnput type="button" vatue=" ぼ か し "id="effect"></form> 
_ ロ | <canvqSs wtdth="329" hetght="249" style="border:1px solid blgck""> 
Canvas 対 応 プ ブラ ウザ を 使用 し て 下さ い 
</CanVaS> 
| </body> 
ーー </html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("1ogd" functton(){ 
// Canvas 要 素 を 読み 出し 2D コ ン テ キ スト を 取得 
Var myCanvas = document.getEtementsByTagName( "canvas")[9] : 
Var Context = myCanvas .getContext("2d"): 
// 描画 を 描画 する 
var 1mgOb] = new ITmage(): 
tmg0b].src = "1mages/sample.]pg': 
tmgOb].onload = functton(){ 
// 画像 が 読み 込ま れ た ら Canvgs に 描画 
context.drqwTmage(thts,。 9, の): 
} 
// ボタ ン に イベ ント を 割り 当て 
document .getEtementById("effect").gddEventLitstener("ctick",functton(){ 
// ほか し 処理 を 行う 関数 を 呼び 出す 
blur(context。 myCanvas .wtdth,。 myCanvas . hetght , 
[ 31/9。 1/9,。 1/9,。 
1/9。1/9。1/9。 
1/9。31/9、1/9 ] 





| 


る 口 | 


| 


| セロ | ggll_ 
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う : 
+, foalse): 
// フィ ル タ 処 理 関数 
function blur(Ccontext。w。h, pat){ 
// Canvas 内 の ピク セル デー タ を 読み 出す 
var ptxelData = context.getTmageDatoC9,9,w,h).dgatg: K4 


生 王 ロ TI 口 N- ジ 12 mw 画像 を ぼかす 


// 縦 方 向 の ビク セル 数 だ け 繰り 返す 4 
forCvar y=hi y>=-1: y--)+ 
// 横 方 向 の ピク セル 数 だ け 繰 り 返 す 
forCvar x=W: X>=-1: X--){ es 
forCvar c=9: c<3: c++){ | こ 
var total = の: 
forCvar py=9: py<3: py++){ // フィ ル タ カ ー ネ ル の 縦 サ イズ In 


forCvar px=9: px<3: px++){ // フィ ル タ カ ー ネ ル の 横 サ イズ 


var XX = X+PXj p 
Var yy = YTPY: 直 「 
/ 座標 が 画面 か ら は み 出さ な いよ うに 修正 還 
tf Cxx < 9 の ){ xx = の :} 

tf (xx > (w-1)){ xx = w-15 } 回 


if (yy < の {yy = の:} 

if (yy > Ch-1)){ yy = h-1: } 計 

// 処理 する ピク セル の 配列 内 で の 位置 を 計算 する |@ 

var potnter =(yy*wW+ xxX) キ 4+C: ーーー 
3 


// フィ ル タ カ ー ネ ル の 位置 を 求め る 





var kpos = Py * 3 + PXi で 
// 色 デ ー タ を 読み 出し 計算 を 行う 0 
var n = ptxelData[potnter] : 
n=n* pgt[kpos]: | @ 
total = total + ni: [ 





} 
} 
// 処理 し た ピク セル を 格納 する 位置 を 計算 
Var XX = X+1: 
Var yy = \+1: 
// 座標 が 画面 か ら は み 出 さ な い よう に 修正 
tf (xx < の ){ xx = の :} 
tf Cxx > Cw-1)){ xx = w-1: } 
if (yy < 9{ yy = 9:} 
tf O①y > (h-1){ yy = h-1j は 
// 処理 結果 を 配列 に 入れ る 


potnter = (yy*wW+xX)* ま 4+ て: 
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ptxelData[potnter] = total: 
} 

} 
} 
// 処理 結果 を Canvas に 描画 する た め に 新規 に ピク セル デー タ を 生成 
var output = context.createImageData(w,h): 
// ピク セル デー タ の 総数 だ け 繰 り 返 す 
for(var 1=9: 1<w*h*4: ュ ++)† 

// 操作 し た ピク セル を 入れ る 

output . data[1] = ptxelData[t] : 
} 
context.putTmageDataCoutput, の, の ): // Canvas に 描画 する K4 
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+ 4 


}。 faqlse): 


プラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 Canvas に 描画 され て いる 画像 が 
ぼや け ま す 。 何 度 も ボタ ン を クリ ッ ク す る と 、 より 画像 が ぼけ て いき ます 。 





miamll 画 画像 を ぼかす に は ピク セル の 平均 を 取る 


Canvas に 抽 画 され て いる 画像 を ぼかす に は 、 ピク セル の 平均 を 取り ます (平滑 化 フ ィ 
ル タ / 平 均 化 フィ ル タ ) 。 中 心 の 周辺 に ある ピク セル と の 輝 度 の 平均 を と る こと で 画像 が 
ぼや け て いき ます 。 プロ グラ ム 中 の 以下 の 部 分 の 数 値 を 変更 する こと で 、 ぼかし 具合 を 
設定 する こと が で きま す 。 な お 、 ビ クセ ル 操 作 に 関し て は 、480 ペ ー ジ を 参照 し て くだ さい 。 







[ 1/9。 1/9。 1/9, 
/9、 9。 1/9。 
1/9。 4/9。 179 ] 


mm 員 IN 昌一 力 ル ディ スク 上 で の 動作 に つい て 


ロー カル ディ スク 上 で は 動作 し な V Po ます 。 また 、 サー バー 上 に ある 画像 
は 処理 で きま す が 、 ロー カル ディ スク 上 に ある 画像 を Canvas に 描画 し た 場合 、 そ の 画像 
の ビク セル デー タ は 読み 出せ な v er プラ ウザ に よる が 、 セキ ュ リ ティ エラ ー に 
な る こと が ある ) . 











生 局 ピロ 丁 | 口 N-212 m 画像 を ぼかす 


miml 画 IIN 較 人 け 昌 する 画像 が 大 きい 場合 


大 きい サイ ズ の 画像 を 処理 する 場合 、 処理 に 時 間 が か か り 、 プラ ウザ が 何 も 操作 で き 
な く な っ て し まう 場合 が あり ます 。 この よう な 場合 は 、 並列 処理 を 行う Web Workers を 使 
用 し ます 。 な お 、 Android 2、 Windows Phone の 場合 は 、 UI 操作 を 行う 処理 は 別に 動 
作 す る た め 、 画像 処理 中 で も ブラ ウザ の 操作 を 行う こと が で きま す 。 


mml 半 8N 細 較 用 ソス ほか が し を 適用 する に は 


平滑 化 フ ィ ル タ で は な く 、 ガウ ス ぼ か し に する に は 、 次 の よう に 配列 の 値 ( カ ー ネ ル 値 ) 
を 設定 し ます 。 












blur(context, myCanvas .wtdth, myCanvas .hetght, 
[ 1/16, 2/16, 1/16, 
2/16, 4/16, 2/16, 
1/16, 2/16, 1/16 ] 

う : 


関連 項目 ょ ゅ 


e グレ ー ス ケー ル 画 像 に する ……ー ド ドド p.480 
e エンボス 加工 する も …… ド ドド rr p.484 
人 画像 の ガン マ 補 正 を 行う お や す と を で で いと て くい と ルツ イス スス くく KCKXALSAEK AKI XS D.492 
e 画像 を 白黒 化 (2 値 化 ) す る …" じ or p.495 
e 画像 を 特定 の 色相 (トー ン ) に する …… ド im p.499 
e 要素 に ぼかし フィ ル タ を 適用 する …… ド io p.97 ] 
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=1 コ FMlmINB>s に 
画像 の ガン マ 補 正 を 行う 


ここ で は 、 Canvas に 表示 され て いる 画像 の ガン マ 補 正 を 行う 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttl e>SampLe</tit1e> 
<SCrtpt src="]Ss/sqmple.]S "></scrtpt> 
</head> 
<body> 


<form> 








<tnput type="text" vglue="1.8" 1d="gomma"> 
<tnput type="button" vagtue=" ガ ンマ 補正 " 1d="effect"> 

</form> 

<canvas wtdth="32 の 9" hetght="249" styte="border:1px soltd black""> 
Canvas 対 応 プ ラウ ザ を 使用 し て 下さ い 





JavaScript の コー ド (sample.js) 


wtndow.gddEventLtstener("1ogd" 。 function(){ 
// Canvgs 要 素 を 読み 出し ZD コン テキ スト を 取得 
Var' myCanvas = document.getElLementsByTagName( "canvas")[9] : 
var context = myCanvas .getContext("2d"): 
// 描画 を 描画 する 
var tmgOb] = new Image(): 
tmgOb].src = "1mages/saqmple.]pg': 
tmgOb].ontogd = function(){ 
// 画像 が 読み 込ま れ た ら Canvaqs に 描画 
context .drawTmage(thts, 9, 9): 
+ 
// ボタ ン に イベ ント を 割り 当て 
document.getElementById("effect").gddEventLtstener("ctLitck"。functton(){ 
// Caqnvgs に 画像 を 描画 
context.drawImage(1mg0b], 9, 9): 
// 入力 され た ガン マ 値 を 読み 出す 
Var gVglue = parseFtoatCdocument .getE1ementByTd( "gamma").vatue): 
// ガン マ 補 正 処理 を 行う 関数 を 呼び 出す 
9qmmaAd]just(context, myCanvas .wtdth。myCanvas .hetght, gVatue): 
+, false): 


還 品 ヒロ 丁 | ロ NN -213 mw 画像 の ガン マ 補 正 を 行う 


// ガン マ 補 正 処理 関数 1 マ 
functton gammaAdJust(context, w、h, gamma)t 

// Canvgs 内 の ピク セル デー タ を 読み 出す 

var ptxelDatg = context .getITmageData(9,9, w, h).datg: 

// 縦 方 向 の ピク セル 数 だ け 繰 り 返 す 

forCvagr y=9: y<h: y++){ 

// 横 方 向 の ビ ピク セル 数 だ け 繰り 返す 
forCvar x=9: x<W: X++)† 

// 処理 する ピク セル の 配列 内 で の 位置 を 計算 する 
// 配列 要素 は 「 赤 」「 縁 』「 青 」「 不 透明 度 (c )」 の 順番 
var potnter = (Y*w+x)* 4: 
// 色 デ ー タ を 読み 出し 
var red = pitxelData[potnter+9] : 
var green = pixelData[potnter+1] : 
var blue = ptxelData[potnter+2Z] : 人 
var atpha = pixelData[potnter+3] : 
// ガン マ 補 正 nn 
var red = 255 * Math.pow(Cred / 255), 1/gamma): 
var green = 255 * Math.pow((green / 255), 1/gamma): ー 
var blue = 255 * Math.powCCbtue / 255), 1/gommo): 0 
// 補正 結果 を 配列 に 入れ る ーー 
ptxetData[potnter+9] = red: 
ptxelData[potnter+1] = green: し ーー 





ptxelData[potnter+2] = blue: 
ptxelDagta[potnter+3] = qlpha: 
} 
} 
// 処理 結果 を Canvas に 描画 する た め に 新規 に ピク セル デー タ を 生成 
var output = context.createlTmageData(w,h): 
// ピク セル デー タ の 総数 だ け 繰 り 返 す 
forCvar 1= の : 1<w*h*4・ ュ ++){ 
// 操作 し た ピク セル を 入れ る 
output . data[1] = ptxetData[t]: 
} 
// Canvas に 描画 する 
context . putTmageData(output の 9,9): 
} 
+, fatse): 


人 ハハ 6/ 有 5 SBAUBO/SBAUEB バ ) に に き 貞 MyM こ ma 


ブラ ウザ で index.html を 表示 し 、 ガン マ 値 を 入力 し ボタ ン を クリ ッ ク す る と 、 Canvas に 捕 画 さ 
れ て いる 画像 に 対し て ガン マ 補 正 が 行わ れ ま す 。 
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還 ビビ TI ロ NI-213 mw 画像 の ガン マ 補 正 を 行う 


mml 自 画像 の ガン マ 補 正 を 行う に は 「255x( 輝 度 -255) ! ツ 」 の 計算 式 を 使う 


Canvas に 捕 画 され て いる 画像 の ガン マ 補 正 を 行う に は 、「255x (輝度 =255) "| の 
計算 式 を 使い ます 。 すべ て の ピク セル 値 を 読み 出し 、 この 計算 式 に 従っ て 求め た 値 を 
Canvas に 書き 戻し ます 。 

な お 、 ビク セル 操作 に 関し て は 、 480 ペ ー ジ を 参照 し て くだ さい 。 


miml 加 8 に 症 昌一 力 ル ディ スク 上 で の 動作 の つい て 


ロー カル ディ スク 上 で は 動作 し な い ブ プラ ウザ が あり ます 。 また 、 サー バー 上 に ある 画像 
は 処理 で きま す が 、 ロー カル ディ スク 上 に ある 画像 を Canvas に 描画 し た 場合 、 そ の 画像 
の ビク セル デー タ は 読み 出せ な いこ と が あり ます (プラ ウザ に よる が 、 セキ ュ リ ティ エラ ー に 
な る こと が ある ) 。 


mm 員 遇 N 較 八 得する 画像 が 大 きい 場合 


大 きい サイ ズ の 画像 を 処理 する 場合 、 処理 に 時 間 が か か り 、 ブラ ウザ が 何 も 操 作 で き 
な く な っ て し まう 場合 が あり ます 。 この よう な 場合 は 、 並列 処理 を 行う Web Workers を 使 
用 し ます 。 な お 、 Android 2、 Windows Phone の 場合 は 、 UI 操作 を 行う 処理 は 別に 動 
作 す る た め 、 画像 処理 中 で も ブラ ウザ の 操作 を 行う こと が で きま す 。 














皿 計 事 計 ミ 邊 4 


@ グ レー スズ スケール 画像 に する の … れ ぬ mー…………ー バ ドド ドド ドド ドド 2 に kmeee re p.480 
0 ドン た 才 (義和 4 か 0Ntot く yt も た 424) YUE も 4 く が MteARGYeeikebt tRNAEO 光 2D26 CeEtAZ4ysaxe p.484 
人 間際 まん NSKvo を 46 は 4224 くま vts42 8 し MKSS32w か CRY な SGSM 到 を 0o 4 も い UKA D.488 
3 画像 を 幅 黒 化 (の 値 化 ) す る すき 0 宮井 池本 人 る 沈 党 池 06。 9 6 8 だ 光二: な は あこ p.495 
と 】 画像 を 特定 の 色相 (トー ン ) に する 名 浅生. 006 基 当 科 生涯 まあ 4 は D.499 
@ 要 至 の 区 度 (明る べ ) を な 変 要する G 〇 上 上 (( 伏 O … ヘ 乗 人 ご で で 信息 忠 に トード < ドド ドド 0 D.962 


LIE9 1 Chrome ! Safari 5 | Firefox 4 1 Opera11 ! iOS4 」 Android2 


ECUDTIUHN-21 人 4 


画像 を 白黒 化 ( ろ 値 化 ) す る 


ここ で は 、 Canvas に 表示 され て いる 画像 を 白黒 化 (2 値 化 ) す る 方 法 に つい て 解説 し ます 。 
HTML(index.htm|) [ こ 


<!DOCTYPE html> 





<html> W 
<head> ーー 
<meto charset="utf-8"> ロ 
<tttle>SqmpLe</t1t1e> 間 
<scrtpt src="]s/sqmple.]S "></scrtpt> I ロ 「 

</head> 
<body> gn 

<form> 
し きい 値 :<input type="text" value="127" 1d="threshold"> 生 ・ 

<tnput type="button" value=" 白 黒 に する " id="effect"> き 
</for> 生 

軸 


<canvas wtdth="329" hetght="249" style="border:1px soltd black""> 
Canvas 対 応 ブ ラウ ザ を 使用 し て 下さ い ーー 一 
</CcanVaS> D 
</body> Er 
</html> 


JavaScript の コー ド (sample.jS) 
window .aqddEventListener("1ogd" 。 functton(){ 

// Canvas 要 素 を 読み 出し ZD コン テキ スト を 取得 

var myCanvas = document.getEltementsByTagName( "canvas")[9]: 

var context = myCanvas .getContext("2d"): 

// 描画 を 描画 する 

var tmgOb] = new 1mage(): 

tmgOb]j.src = "1mages/sample.]Ppg': 

tmg0b].ontoagd = functton(){ 
// 画像 が 読み 込ま れ た ら Canvas に 描画 
context . drawImage(this, の, の): 

} 

// ボタ ン に イベ ント を 割り 当て 

document . getELementById("effect") .addEventLtstener("cLtck", functton(){ 
// 画像 を 描画 
context.drawImage(1mgO0b], 9 の, 9): 
// し きい 値 を 読み 出す 
var n = parseInt(document .getEtementById("threshold").vatue): 
// 白黒 化 (2 値 化 ) を 行う 関数 を 呼び 出す 
mono(context。 myCanvas .wtdth,。 myCanvoas .hetght, n): 

}。 false): 
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m ビビ ロ 丁 | ロト ! - 2 1 4 m 画像 を 白黒 化 (2 値 化 ) す る 


// 白黒 化 (2 値 化 ) 処 理 関数 (誤差 拡散 ) 
functton mono(context, w,。h, threshold){ 
// Caqnvas 内 の ピク セル デー タ を 読み 出す 
var ptxelLData = context.getTmageData(9,.9, w。h).data: 
// 縦 方 向 の ピク セル 数 だ け 繰 り 返 す 
for(var y= の : y<h: y++){ 
// 誤差 を 格納 する 変数 
var diff = の : 
// 横 方 向 の ピク セル 数 だ け 繰 り 返 す 
for(var x=9: x<w: x++)† 
// 処理 する ピク セル の 配列 内 で の 位置 を 計算 する 
// 配列 要素 は 「 赤 」「 緑 」「 青 」「 不 透明 度 (e )」 の 順番 
var potnter =(y*w+x)* 4: 
// 色 デ ー タ を 読み 出し 
var red = ptxelData[ potnter+9] : 
var green = ptxelData[ potnter+1] : 
var blue = pixelData[potnter+2] : 
var qlpha = ptxelDatag[potnter+3] : 
// 輝度 を 計算 
var gray = g9reen* の 9 の.6+red* の 9.3+ blue * 9.1: 
gray = gray + d1ff: 
// し きい 値 よ り 大 きい か 小さ いか 
tf (gray > threshold){ 
dtff = gray - 255: 
groy = 255: // 白 に する 
+else{ 
diff = 255 - grgy: 
groy = り の: 
} 
// 補正 結果 を 配列 に 入れ る 
ptxeLData[potnter+9] = gray: 
ptxelData[potnter+1] = gray: 
ptxetLData[potnter+Z2] = groy: 
ptxelData[potnter+3] = alpha: 
} 
} 


// 処理 結果 を Convqs に 描画 する た め に 新規 に ピク セル デー タ を 生成 


var output = context.createImageData(w,h): 

// ピク セル デー タ の 総数 だ け 繰 り 返 す 

forCvar 1= の : 1<w*h*4: エ ++){ 
// 操作 し た ピク セル を 入れ る 
output . data[1] = ptxeltDagta[1] : 

} 

// Caqnvgs に 描画 する 

Context. putTmageData(output, の,9): 

} 
}, foglse): 


思 王 ビ ロ 丁 | 口 N -2 1 wm 画像 を 白黒 化 (2 値 化 ) す る 


プラ ウザ で index.html を 表示 し 、 し きい 値 を 入力 し て ボタ ン を クリ ッ ク す る と 、 Canvas に 描画 
され て いる 画像 が 白黒 に 変換 され ます 。 


し きい 値 : 127 


II 
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画像 を 白黒 化 (2 値 化 ) す る に は 
mMMMI し きい 値 に よっ て 黒 と 白 に ピク セル を 置き 換え る 


Canvas に 描画 され て いる 画像 を 白黒 化 (2 値 化 ) す る に は 、 し きい 値 よ り も 小さ い 場 合 
は 黒 に 、 大 きい 場 6 に 置き 換え て いき ます 。 た だ し 、 この 方 法 で は 画像 
の 情報 が 失わ れ ま す 。 そこ で 、 失わ れ た 情報 を 次 の ビク セル に 渡す よう に し ます ( 諾 差 

分 散 / 誤 差 拡散 )。 渡さ これ た の 輝度 の 差分 ) を 加算 し 、 し きい 値 と 比較 し て 白黒 の ビ 
クセ ル に 置き 換え て いき ます 。 これ を 画素 数 分 行え を ば 、Canvas の 画像 を 曰 墨 化 (2 値 化 ) 
する こと が で きま す 。 

な お 、 ピク セル 操作 に 関し て は 、 480 ペ ー ジ を 参照 し て くだ さい 。 


mm 叶 四 上 詳 一 力 人 ルディ スク 上 で の 動作 に つい て 


ロー カル ディ スク 上 で は 動作 し な い ブ プラ ウザ が あり ます 。 また 、 サー バー 上 に ある 画像 
は 処理 で きま す が 、 ロー カル ディ スク 上 に ある 画像 を Canvas に 画 し た 場合 、 そ の 画像 
の ビク セル デー タ は 読み 出せ な いこ と が あり ます (プラ ウザ に よる が 、 セキ ュ リ ティ エラ フラー に 
な る こと が ある ) 。 
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生 王 ロ 丁 | 口 N -214 m 画像 を 白黒 化 (2 値 化 ) す る 


mal 部 時 に 細 人 け 昌 す る 画像 が 大 きい 場合 


大 きい サイ ズ の 画像 を 処理 する 場合 、 処理 に 時 間 が か か り 、 プラ ウザ が 何 も 操作 で き 
な く な っ て し まう 場合 が あり ます 。 この よう な 場合 は 、 並列 処理 を 行う Web Workers を 使 
用 し ます 。 な お 、 Android 2、 Windows Phone の 場合 は 、 UI 操作 を 行う 処理 は 別に 動 
作 す る た め 、 画像 処理 中 で も プラ ウザ の 操作 を 行う こと が で きま す 。 







関連 項目 ょ ゅ 


全 グ も ルケ ナール 細 欄 人 に 人 -* 寺 寺 9RE20E 人 464r22000AeY p.480 
し 人 ウ の 本 す 1 拓 郵 の <OCOTTCICOTYYPEYYPPYTPPZYYT p.484 
@ 還 儀 義 翌 迷 ee …D.488 
多 画像 の ガン マ 補 正 を 行う 計れ を な が の 人 れい とび 才 > まち >s く > くま os < ceo < 生計 p.492 
に 3 画像 を 特定 の 色相 NE 義人 注 < 計 。。。、、。。22V2css3Yeottntrre・2v200rte2252 い 7 p.499 


LIE9 』Chrome 』 Safari 5 | Firefox 4 1 Opera11 』 OS4 | Android2_ 


=1 コ maglmlNB ン sl に 
画像 を 特定 の 色相 (トー ン ) に する 


ここ で は 、Canvas に 表示 され て いる 画像 を 特定 の 色相 (トー ン ) に する 方 法 に つい て 解説 し 
ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metg charset="utf-8"> 
<tttle>Sample</t1tle> 
<SCrtDt src="]S/sqmple .]S"></SCr1Dt> 
</head> 
<body> 
<for> 
色相 :<tnput type="text" vaqlue="69" 1d="hueVatue"> 
<tnput type="button" value=" 指 定 し た トー ン に する " id="effect"> 
</form> 
<canvas wtdth="329" hetght="249" style="border:1px soltd black""> 
Canvas 対 応 プ ブラ ウザ を 使用 し て 下さ い 


</CanVQS> 





</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLitstener("toad" 。 functton(){ 
// Canvas 要 素 を 読み 出し ZD コン テキ スト を 取得 
var myCanvas = document.getEtementsByTagName("canvgs")[9]: 
var context = myCanvas .getContext( "2d"): 
// 描画 を 描画 する 
var 1mgOb] = new Image(): 


tmgOb].src = "1mages/sample.]pg': 


人 ハハ 6/]6 SBAUBO/SBAUB^) に きこ 4 ミト Fa 


tmgOb].ontoad = functton(){ 
// 画像 が 読み 込ま れ た ら Canvaqs に 描画 
context . drawTmage(thts,。 9, の ): 
} 
// ボタ ン に イベ ント を 割り 当て 
document . getEtementByIdC"effect").oddEventLtstener("clLtck", functton()1 
// 画像 を 描画 
context . drawImage(1mgO0b], 9, 9): 
// 色相 の 値 を 読み 出す 
var n = ParseFlogt(document .getELementByTd( "hueVatue").value): 
// 特定 の 色相 で 塗り 潰す 処理 を 行う 関数 を 呼び 出す 


colorToneCcontext, myCanvas .wtdth, myCanvas .hetght,。 n): 
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mm 選 E ビ ビ ピ TI ロ N-215 mW 画像 を 特定 の 色相 (トー ン ) に する 


+, foqlse): 
// 白黒 化 (2 値 化 ) 処 理 関 数 (誤差 拡散 ) 
functton colorTone(context, w。h, newTone){ 
= // Canvqs 内 の ピク セル デー タ を 読み 出す 
Var ptxelLDatq = context.getImageData(9.9,。w,。h).daqto: 
// 縦 方 向 の ピク セル 数 だ け 繰 り 返 す 
for(var y=9: y<h: y++){ 
// 横 方 向 の ピク セル 数 だ け 繰 り 返 す 
for(var x=9: x<wi x++){ 
// 処理 する ピク セル の 配列 内 で の 位置 を 計算 する 
| // 配列 要素 は 「 赤 」「 緑 」「 青 」「 不 透明 度 (e )」 の 順番 
| var potnter = (y*w+x)* 4: 
ロ | // 色 デ ー タ を 読み 出し 
| var red = pixelData[ potnter+9] : 
コ var green = ptxelLData[potnter+1] : 
[ var blue = ptxelLDagtg[potnter+2] : 
var qlpha = ptxelData[potnter+3] : 
| // RGB か ら HSV に 変換 
var hsv = RGBtoHSVCred, green, blue): 
| // 指定 し た 色相 に し た 後 、 再度 RGB に 変換 する 
var rgb = HSVtoRGBCnewTone , hsv.S, hsv.V): 
| // 補正 結果 を 配列 に 入れ る 
ptxelData[potnter+9] = rgb.R*255: 
ptxelLData[potnter+1] = rgb.G*255: 
ptxelDataq[potnter+2] = rgb.B*255: 
PtxelData[potnter+3] = qtpha: 





} 
// 処理 結果 を Coqnvas に 描画 する た め に 新規 に ピク セル デー タ を 生成 
var output = context.createImageData(w, h): 
// ピク セル デー タ の 総数 だ け 繰 り 返 す 
for(var 1= の 9: 1<w*h*4・ ュ + ォ +){ 
// 操作 し た ピク セル を 入れ る 
output . dgta[1] = pixelData[t] : 
} 
// Canvgs に 描画 する 
context. putImageData(output, 9,9): 
} 
}。 foqlse): 
// RGB か ら HSV CR:9 の >255,G:9 の て 255, B:9 の て 255。h: の て 369, s:9 の 1, B:6 て 1) 
functton RGBtoHSVCr,。 g, b){ 


Vdrh=sS=VvV= の : 


の AS/ ロ E SBAuBO/SgAueo 還 eml 


1f (Pr>=g) cdx 


ri elLse cmax = 9: 
b: 


: else cmtn = 9i: 


tf ( b > cmgx) cmax 


1f (Pr <=9g) Ci1in = 


に 1 


tf(Cb< cmin) cmtn = b: 


V = CmoxX: 


還 ビビ ピロ T| 口 NN-215 W 画像 を 特定 の 色相 (トー ン ) に する 


Var C = CaX - CmWtn: に 1 


tf (cmax == の ) Ss = 9: elSe S = C/CmQxX: 


tf (s != の ){ 
tf Cr == cmax){ h = (g - b)/c: 
+else+t 
tf (g == cmax){ h = 2 +(Db - r)/Cc: 
+elset 
tf (b == cmax)h=4+(Cr - 9)/Cc: 
} 
} 
h=h* 60: 
if (h< の h=h+ 369: 
} 
return { Hih,S:s。 Vi:v/255 } 


} 
// HSV か ら RGB CR:9 て 1。G: の >1。B: の て 1。h:9 の >369。s:9 て 1 B:9 の 1) 
functton HSVtoRGB(Ch, s, v){ 
VOPP=9=b も = の : 

1f (Ss < の ) Ss = 9: 

も を も とまる < 

tf (v< の 9 の )v= 9: 

tf-CV > まま が V =- 15 

h = h % 360: 

if Ch < の h=h+ 3609: 

h=h/ 60: 

1 = Math.floor(h): 

Varf=h- 1: 

DE ユーザ で (まま ー る が 

P2=V ま * (1 - Ss*f): 

D3.e V そま = (ミー すう 3 

tf (1 == の ) {Pr = Vi 9 = DP3: b = P1: 

if ==1){r=Pp2i9=Vji b=P1: 





男 有 


1f (1 ==2) {Pr=p1i9=V:i b=P3: 
tf (1 ==3){r=Pp1:ig =P2Zi b = Vj 
if (=4){r=Pp3ig=P1i b=v: 


人 ハ G/]6 SBAUBO/SBAUB) に に きこ に 4 


こ ア ーー と アー トマ アート アー トー トー 


if 1 ==5)1『P=Vig=P1ib=Pp2i 
return { R:r, Gig, B:b } 


ブラ ウザ で index.html を 表示 し 、 色相 の 値 (0 一 360) を 入力 し て ボタ ン を クリ ッ ク す る と 、 指 
定 し た 色相 (トー ン ) の 画像 に 変換 され ます 。 
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mm ビ ビビ TI ロロ N-215 W 画像 を 特定 の 色相 (トー ン ) に する 








画像 を 特定 の 色相 (トー ン ) に する に は 
ピク セル の 色情 報 を RGB か ら HSV や HSL な ど に 変換 する 


Canvas に 搬 画 され て いる 画像 を 特定 の 色相 (トー ン ) に する に は 、 ピク セル の 色情 報 
を RGB か ら HSV や HSL な ど に 変換 し ます 。 HSV/HSL に 変換 する と 、 色情 報 は 色相 ・ 
秒 度 ・ 明 度 / 輝 度 に な り ま す 。 色相 だ け を 変え て 再度 、 RGB に 変換 する こと で 画像 の 色 
相 (トーン ) だ け を 変え る こと が で きま す 。 サイ ド や 輝度 な ども 調整 する こと で セピア 調 な ど 
に する こと も で きま す 。 な お 、 ビク セル 操作 に 関し て は 、 480 ペ ー ジ を 参照 し て くだ さい 。 


mm 回 2 に 旧 較 一 力 ル ディ スク 上 で の 動作 に つい て 


ロー カル ディ スク 上 で は 動作 し な い ブ プラ ウザ が あり ます 。 また 、 サー バー 上 に ある 画像 
は 処理 で きま す が 、 ロー カル ディ スク 上 に ある 画像 を Canvas に 描画 し た 場合 、 そ の 画像 
の ビク セル デー タ は 読み 出せ な いこ と が あり ます (ブラ ウザ に よる が 、 セキ ュ リ ティ エラ ー に 
な る こと が ある ) 。 


mml 敵 上 還 人 け 昌 す る 画像 が 大 きい 場合 


大 きい サイ ズ の 画像 を 処理 する 場合 、 処理 に 時 間 が か か り 、 プラ ウザ が 何 も 操作 で き 
な く な っ て し まう 場合 が あり ます 。 この よう な 場合 は 、 並列 処理 を 行う Web Workers を 使 
用 し ます 。 な お 、 Android 2、 Windows Phone の 場合 は 、 UI 操作 を 行う 処理 は 別に 動 
作 す る た め 、 画像 処理 中 で も プラ ウザ の 操作 を 行う こと が で きま す 。 


ロロ NEPUHINT 



















関連 項目 
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二 ま の 億 本 拉 人 0 失 A222DNKG0Wsv3 人 0282284 な eyPc2S24eeee 2439162200 18028EeWHZVWSRZ7 p.484 
二村 MAASK04eNXYy234229RYSRkYeMNVSYOSERE 2 p.488 
本 本 計 の 9 の 旨 YYetSNAyz299 が AreaStwoyaorvsuskA0GH2SYDUA AS p.492 
を 性 拉 半 P 詳 4 に 0 仁科 4yShTeutv estesr422cno2V282820ESSUIR p.495 
e 要素 に トー ン ( 色 相 変 換 ) フ ィ ル タ を 適用 する 上 …( パ (の (mW い ドム トド ーーー トー……… Dp.958 


LIE9 1 Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS4 ! Android2 IWP/ 


5 THHN・ の 1 らら 


バタ ー ン を 生成 する 


ここ で は 、 パ ター ン を 生成 し 、 生 成 し た パタ ー ン で 図形 を 塗り つぶ す 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<heod> 
<meta charset="utf-8"> 
<tttle>SqmpLe</t1t1e> 
<SCrtPt Src="]S/sqmple.]S "></SCr1Dt> 
</head> 
<body> 
<canvas witdth="329" hetght="249"> 
Canvas 対 応 ブ ラウ ザ を 使用 し て 下さ い 
</CqanVQaS> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .addEventLtstener("logd" 。 functton(){ 
// Caqnvas 要 素 を 読み 出し 
var myCanvas = document.getEtementsByTagName("canvas")[9]: 
// コン テキ スト を 取得 
var context = myCanvas .getContext("2d"): 
tf (!context){ return: } 


// 画像 を 描画 する 
var tmgOb〕 = new Image(): 








1tmgOb].src = "1mages/sunftower.]pg": 
tmg0b].ontoad = functton(){ 
// 画像 を パタ ー ン と し て 登録 
var pattern1 = context.createPattern(thts, "repeat"): 
// 塗り つぶ し を パタ ー ン に する 
context.ftlLStyle = pattern1: 
// 三角 形 を 描画 
context.begtnPath(): 
context.moveTo(169,09): 
context.1tneTo(319, 220): 
context.ttneTo(19, 180): 
context.closePath(): 
// パタ ー ン で 塗り つぶ す 
context.ft1lL(): 


} 
+, false): 


の 八 /]5 SBAUBJ/SBAUE バ ) に に 上 4 ミト | 
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生 ビビ ロ 丁 | 口 N -2 1 mw パタ ー ン を 生成 する 


ブラ ウザ で index.html を 表示 する と 、 三角 形 が 表示 され 、 その 中 が 指定 し た パタ ー ン で 浴 
りつ ぶさ れ ま す 。 





= 中 ml に 政 ハタ ー ン を 生成 する に は 「createPattern() 」 メソッド を 使う 


パタ ー ン を 生成 する に は 、| createPattern () 」 メ ソ ッ ド を 使い ます 。 「createPattern () 」 
は 、 画像 を パタ ー ン に する メソ ッ ド で す 。 この た め 、 最初 の パラ メー タ に は 、 画像 オブ ジェ ク 
ト を 指定 し ます 。 2 番目 の パラ メー タ に は 、 次 の 表 の 文字 列 が 指定 で きま す 。 2 番目 の パラ 
メー タ が 空 文字 な どの 場合 は 、「 repeat」 を 指定 し た の と 同じ 結果 に な り ま す 。 


縮 横 方 向 に 線 り 返し 
















横 方 向 に 繰り 返し 
綻 方 向 に 繰り 返し 


| createPattern () 」 メ ソ ッ ド は 、 生成 し た パタ ー ン を 返し ます 。 生成 し た パタ ー ン を 利 
用 する に は 、| 名 Style」 プ ロ パ ティ に 代入 し ます 。 これ に より 、 図形 で 「 色 () 」 メ ソ ッ ド を 実 
行 す る と 、 図形 の 内 部 が パタ ー ン で 描画 され ます 。 







LIE9 | Chrome Safari 5 | Firefox 4 1 Opera11 | iOS4 』 Android2 IWP 


=1 コ malmlNB ン sy/ 
尿 を 揚 男 する 


ここ で は 、 影 を 描画 する 方 法 に つい て 解説 し ます 。 


に まあ W 表 = 症 m=mle】 填 HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttle>SqmpLe</t1tle> 
<SCrtDpt src="]S/sqmple.]S "></SCrtDt> 
</hegd> 
<body> 
<canvas width="329" hetght="249"> 
Canvas 対 応 プ ブラ ウザ を 使用 し て 下さ い 
</CanVQS> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.addEventLtstener( "toad" , functton(){ 
// Canvas 要 素 を 読み 出し 
vgr myCanvas = document.getElementsByTagName("canvos")[9]: 
// コン テキ スト を 取得 
var context = myCanvas .getContext("2d"): 
tf (!context){ returni } 
// フォ ント と サイ ズ 、 色 を 設定 する 
context.font = "24pt "Tahoma-Bold'": 
context.ftlLLStyte = "rgba(9, 255,。9, 9.5)": 
// 影 の 設定 を 行う 
context. shadowColor = "blLue": 





context.shadowBlur = 3: 
context . shadowOffsetX = 109・ 
context. shadowOffsetY = 5: 
// 文字 を 描画 する 
context.filLtLText("Shadow Sample", 19, 59): 
// 四角 形 を 描画 する 
context.strokeStyle = "red": 
context.litneWtdth = 4: 
context. strokeRect(19, 199, 299, 60): 

+, fqlse): 


人 ハハ G/6 SBAUB)/SBAUE バ ) 還 だ に まき 抽 に :4 ミ 
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生 GEETIHN-217 mW 影 を 描画 する 


ブラ ウザ で index.html を 表示 する と 、 文字 と 四角 形 に 影 が 描画 きれ ます 。 描画 され る 図形 
に 不 穫 明 度 が 指定 され て いる 場合 、 影 に も その 不透明 度 が 反映 され ます 。 









影 を 指 画 する に は 「shadowColor」 「shadowBlur」 
「shadowOffsetX」 「shadowOffsetY」 プロ パテ ィ を 使う 


影 を 抽 画 する に は 、 次 の 表 に 示す プロ パテ ィ を 設定 し ます 。 


(オフ セッ ト ) 





に IIRII に 拉 




















| shadowColor」 プ ロ パ ティ は 、 カラ ー 名 や カラ ー コ ー ド な ど 、 CSS3 で 指定 で きる カラ ー 
を 指定 する こと が で きま す 。「shadowBlur」 プロ パテ ィ は 影 の ぼかし 具合 を 指定 し 、 値 
が 大 きく な る ほど ぼかし 具合 が 強く な り ま す 。 影 の ずれ 具合 は 、「shadowOffSetX | プロ 
パテ ィ と | shadowOfRSetY」 プ ロ パ ティ で 指定 し ます 。 

な お 、 影 は 、 描画 する 図形 や 文字 の 不透明 度 を 引き 継い で 描画 され ます 。 


mm 癌 四半 間 AndrOid の 「ShadowOffsetY」 プロ パテ ィ の 不具 合 


Android 2-3 の 標準 プチ ウザ で は 、|「shadowOfSetY 」 プロ パテ ィ で 指定 し た 方 
向 が 仕様 と は 逆 方 向 に な り ま す 。 通常 、 正 数 を 指定 する と 下方 向 に 影 が 描画 され ま 
す が 、 Android 2-3 の 標準 プラ ウザ で は 上 方 向 に 影 が 描画 きれ て し まい ます 。 な お 、 
Android 4 で は 修正 され て いま す 。 











LIE9 Chrome 1 Safari 5 | Firefox 4 」 Opera11 


EE 11FIN- る 1 名 


映像 を Canvas に 所 画す る 








ここ で は 、 映像 を Canvas に 描画 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttte>SampLe</t1tLe> 
<scrtpt src="]S/saqmple .]S "></SCrtDt> 
</head> 
<body> 
<form> 
<input type="button" value=" 映 像 を Convas に 描画 " 1d="draw"> 
</form> 
<canvas wtdth="329" hetght="249" style="border:1px soltd black""> 
Canvas 対 応 ブ ラウ ザ を 使用 し て 下さ い 
</CanVqS> 
<vtdeo src="movie/sqmple .mp4" controlts width="384" hetght="216"></vtdeo> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow. gddEventListener("1ogd" 。 functton()+1 
// ボタ ン に イベ ント を 割り 当て 
document . getEtementById("draw").qddEventLtstener("cLtck", functton( う 1 
// Video 要 素 を 読み 出し 
var myVtdeo = document .getEtementsByTagNgme("vtdeo")[9] : 
// Canvas 要 素 を 読み 出し 
var myCanvas = documernt.getELementsByTagName("canvas")[9] : 
// コン テキ スト を 取得 
var context = myCanvas .getContext("2d"): 
tf (!context){ return: } 
// 映像 を 小さ くし て 描画 する 
context . drawlmage(myVtdeo, 69, 49, 299, 159): 
+, fatse): 
+, false): 
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還 王 ピ TI ロト N-2 1 日 m 映像 を Canvas に 描画 する 


ブラウ ザ で index.html を 表示 し 、| 映像 を Canvas に 描画 」 ボ タン を クリ ッ ク す る と 、 現在 再生 
され て いる 映像 が Canvas に 描画 され ます 。 





映像 を 描画 する に は 「drawlmage() 」 メ ソ ッ ド を 使う 





Canvas に 映像 を 搬 画 する に は 、|「 drawlmage () 」 メ ソ ッ ド を 使い ます 。「drawImage 

り 」 メ ソ ッ ド の 最初 の パラ メー タ に [video」 要 素 を 指定 し ます 。 これ で Canvas に 「video」 

安 素 で 表示 され て いる 映像 が 描画 され ます 。「drawImage() 」 メ ノッ ド の 2 番目 以降 の パ 
フ メ ー タ は 画像 を 捕 画 する 場合 と 同じ で 、 次 の よう に な り ま す 。 

@) 座標 を 指定 し て 元 の サイ ズ で 描画 


人 ハハ /5 SBAUBO/SBAUBCJ aars 


drawTmage(vtdeo,。x,。y) 


@) 座標 たこ サ イズ を 指定 し て 描画 
drawImage(video。x,y, width,。 hetght) 


@) 元 映像 の 一 部 を クリ ッ ピ ング し た 後 で 指定 し た 座標 と サイ ズ で 描画 


drqwlmage(vtdeo, sourceX, sourceY, sourceWitdth, sourceHetght, desttnattonX, desttnattonY, 





desttnattonWidth, desttnattonY) 
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LIE9 』 Chrome 』 Safari 5 」 Firefox 4 』 Opera11 





避 上 ピピ TIHUHN- ジ 19 ワ 
Canvas の 内 容 を 他 の Canvas に 描画 する 


ここ で は 、 Canvas の 内 容 を 他 の Canvas に 描画 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<heod> 
<meta charset="utf-8"> 
<tttle>SampLe</tttle> 
<SCrtpt src="]S/sqmple .]S"></SCr1Dt> 
</head> 
<body> 
<form> 
<tnput type="button" vatue=" 左 の Canvas の 内 容 を 右側 の Convas に 縮小 し て 描画 " id="draw"> 
</form> 
<canvas width="329" height="249" style="border:1px soltd blgck""> 
Canvas 対 応 プ ラウ ザ を 使用 し て 下さ い 
</CqnVaS> 
<canvas width="329" hetght="249" style="border:1px soltd red""> 
Canvos 対 応 ブ ラウ ザ を 使用 し て 下さ い 
</CanVQS> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.aqddEventLtstener("1oad" 。 functton(){ 
// ボタ ン に イベ ント を 割り 当て 
document . getEtementById("draw" ) .gddEventLtstener("cltck",。 functton(){ 
// 左側 の Canvas 要 素 を 読み 出し 
var myCanvasLeft = document.getElementsByTagName( "caqnvas")[ の ] : 
// 右側 の Canvgs 要 素 を 読み 出し 
var myCanvasRtght = document .getEtementsByTagName("cqnvas")[1]: 
// コン テキ スト を 取得 
var context = myCanvasRight.getContext( "2d"): 
tf (!context){ return: } 
// 映像 を 小さ くし て 描画 する 
context.drawImage(myCanvasLeft, 69, 49, 299, 159): 
}, faqlse): 
// ラン ダム に 左側 の Canvgs に 四角 形 を 描画 
setTntervat(functton(){ 
// 左側 の Canvgs 要 素 を 読み 出し 
var myCanvasLeft = document.getElLementsByTagName( "canvas")[9] : 
// コン テキ スト を 取得 
var context = myCanvasLeft.getContext( "2d"): K 4 





人 八 〇 / SBAUB<)/SB ビ AUP バ ) 革 世 上 き 半 ここ | 
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mm 選 ビ ロ TI 口 N -2 19 m Canvas の 内 容 を 他 の Canvas に 描画 する 


// 枠 の 色 を 赤色 に 設定 作 
context. strokeStyle = "red": 
context.ttneWtdth = 2: 
var x = Moth.random() * myCanvasLeft.width: 
var y = Math.random() * myCanvasLeft .hetght: 
context . strokeRect(x, y, 49, 29): 

+, 199): 
}, fglse): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 左側 の Canvas の 内 容 が 縮小 され 
て 右側 の Canvas に 描画 され ます 。 





り 5 人 ハ G/ 有 HP SBAUBO/SBAUBC) 革 ご に きま:4 5 
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還 王 ビ ロ T| 口 NN -2 19 m Canvas の 内 容 を 他 の Canvas に 描画 する 


=i ヨ = ョ lm 画 他 の Canvas の 内 容 を 描画 する に は 「drawlmage()」 メソッド を 使う 


他 の Canvas の 内 容 を 描画 する に は 、| drawImage() 」 メ ソ ッ ド を 使い ます 。「draw 
Image() 」 メ ソ ッ ド の 最初 の パラ メー タ に [canvas」 要素 を 指定 し ます 。 これ で Canvas に 
指定 し た 「canvas」 要素 で 表示 され て いる 内 容 が 描画 きれ ます 。「drawImage()」 メ 
ソ ッ ド の 2 番目 以降 の パラ メー タ は 画像 を 描画 する 場合 と 同じ で 、 次 の よう に な り ま す 。 
@ 座標 を 指定 し て 元 の サイ ズ で 描画 










drawTmage(canvas , X, y) 


@ 座標 こ サ イズ を 指定 し て 描画 






drawImage(canvas 。 x。y, width, hetght) 







コピ ー 元 の Canva8 画 像 の 一 部 を クリ ッ ピ ング し た 後 で 指定 し た 座標 と サイ ズ で 描画 
drawImage(CanVas , SOurceX, SourceY, SourceWidth, sourceHetght, desttnattonX, desttnattonY, 
desttnottonWtdth,。 desttnattonY) 
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LIE9 Chrome Safari 5 | Firefox 4 Opera11 』 OS4 | Android2 1 WP 


=1 コ mlmIN ロ ン ルン 1m 
図形 を 回 転 さ せる 


ここ で は 、 Canvas に 捕 く 図形 を 回 転 さ せる (描画 座標 系 を 回 転 す る ) 方 法 に つい て 解説 し 
ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metqa charset="utf-8"> 
<tttte>Sqmpte</t1tle> 
<SCrtpt src="]Ss/sample.]S"></sCrtpt> 
</hegd> 
<body> 
<canvaSs wtdth="329" hetght="249"> 
Canvas 対 応 ブ ラウ ザ を 使用 し て 下さ い 
</CgnVQS> 
</body> 
</html> 





JavaScript の コー ド (sample.js) 
wtndow. gddEventLtstener("load", functton(){ 
// Canvas 要 素 を 読み 出し 
var myCanvas = document.getElLementsByTagName( "caqnvas")[9] : 
// コン テキ スト を 取得 
var context = myCanvas .getContext("2d"): 
tf (!context){ return: } 
// 塗り の 色 を 設定 
context.ft1LStyle = "rgba(255, 9, 9, 9.25)": 
// 四角 形 を 描画 
context.ftLLRect(59, 59, 159, 199): 
// 15 度 回 転 
context.rotate(15 * Math.PI/189): 
// 塗り の 色 を 設定 
context.ftlLStyle = "rgba(9, 9, 255, 9.25)": 
// 四角 形 を 描画 
context.ftLLRect(59, 59, 159, 199): 
+, fatlse): 


厨 司 ビ ロイ T| 口 NN -22 ロ mW 図形 を 回 転 さ せる 


ブラ ウザ で index.html を 表示 する と 、 回 転 し て いな い 赤 色 の 四角 形 と 、 15 度 回 転 し た 青色 
の 四角 形 が 画 され ます 。 





mINImlINl 画 回 転 を 行う に は 「rotate()」 メソ ッ ド を 使う 


Canvas の 2D Context で 描画 する 図形 を 回 転 き せる に は 、| rotate) 」 メ ソ ッ ド を 使い 
ます 。 パラ メー タ に は 、 回 転 する 角度 を ラジ アン で 指定 し ます 。「rotate() 」 メ ソ ッ ド は 、 
原点 を 基準 に し て 回 転 し ます 。 パラ メー タ が 正 数 の 場合 は 時 計 回 り 、 負数 の 場合 は 反 
時 計 回 り に な り ま す 。「rotate() 」 で 回 転 き せる と 以後 、 描画 する 図形 は すべ て 影響 を 
受け ます 。 

「rotate() 」 メ ソ ッ ド で 回 転 角度 指定 し た 後 、 指定 前 の 状態 に 戻す に は 、| rotate() 」 
メソ ッ ド の 実行 前 に 「save ()) 」 メ ノッ ド を 使っ て 情報 を 保存 し て お きま す 。 元 に 戻す 時 点 で 
「restore() 」 メ ソ ッ ド を 使い ます 。 な お 、「restore ) 」 メ ノッ ド を 実行 する と 、 回 転 角度 以 
外 の 情報 も 元 に 戻る の で 注意 が 必要 で す 。 





関連 項目 “ 


e 図形 を 移動 させ る ………ー ド ドド rr p.51 4 
e 図形 を 拡大 ・ 縮 小さ せる …… ド ドド に oooemeneeneneeomommwwnnn p.516 
e 図形 や 画像 を 変形 させ る …… ドド ドド ドド im p.518 














の 八 G/5 SBAUBO/SBAUB) に に 4 ミロ 
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画 有 | 


LIE9 】Chrome 1 Safari 5 | Firefox 4 1 Opera 11 1 iO54 | Android2 1 WP 





=1 ゴ IlmIN ロ ン レ 1 
図形 を 移動 ご せる 


ここ で は 、 Canvas に 描く 図形 を 移動 させ る (描画 座標 系 を 移動 する ) 方 法 に つい て 解説 し 
ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sampte</t1t1e> 
<SCrtDpt src="]S/sample.]S"></ScrtDpt> 
</head> 
<body> 
<canvas wtdth="329" hetght="249"> 
Canvas 対 応 ブ ラウ ザ を 使用 し て 下さ い 
</CanVqS> 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.aqddEventLtstener("toqd" , functton(){ 
// Caqnvas 要 素 を 読み 出し 
var myCanvas = document.getEtementsByTagName( "cgnvas ")[9] : 
// コン テキ スト を 取得 
var context = myCanvas .getContext("2d"): 
tf (!context){ return: } 
// 塗り の 色 を 設定 
context.fLL1Styte = "rgbaC255, 9, 9, 9.25)": 
// 四角 形 を 描画 
Context.f1LLRect(59, 59, 159, 199): 
// 69,-69) に 移動 
context.translate(69, -69): 
// 塗り の 色 を 設定 
context.ft1lLStyle = "rgba(9, 9, 255,9.25)": 
// 四角 形 を 描画 
context.ftLLRect(59, 59, 159, 199): 
}, false): 





| と ロ | c ロ 昌 | L ロ | 
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| 5 ロ || 
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人 ハハ / SBAUBCO)/SBAUB バ ) 半 に に きま 貞 に 4 ミト a 
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恒 王 ロ 丁 | 口 NN-22 1 m 図形 を 移動 させ る 


ブラ ウザ で index.html を 表示 する と 、| translate () 」 メ ノッ ド で 原点 を 移動 させ た 青色 の 場 
所 に 四角 形 が 描画 され ます 。「translate() 」 メ ソ ッ ド を 使用 し な い 場 合 に は 、 赤色 の 場所 に 
描画 され ます 。 





mNIslNl 画 移動 処理 を 行う に は 「translate()」 メソ ッ ド を 使う 


Canvas の 2D Context で 原点 を 移動 させ る に は 、| translate() 」 メ ソ ッ ド を 使い ます 。 
パラ メー タ に は 、 移動 する 横 の オフ セッ ト と 縦 の オフ セッ ト を 指定 し ます 。 パラ メー タ が 正 数 
の 場合 は 、 値 が 大 きく な る に 従っ て 右 下 に 移動 し ます 。 負数 の 場合 は 、 値 が 小さ く な る 
に 従っ て 左上 に 移動 し ます 。 

「translate() 」 メ ノド で 原点 を 移動 し た 後 、 指定 前 の 状態 に 戻す に は 、| translate()」 
メソ ッ ド の 実行 前 に 「save() 」 メ ソ ッ ド を 使っ て 情報 を 保存 し て お きま す 。 元 に 戻す 時 点 で 
「restore() 」 メ ソ ッ ド を 使い ます 。 な お 、「restore()) 」 メ ソ ッ ド を 実行 する と 、 移動 に 関す る 
以外 の 情報 も 元 に 戻る の で 注意 が 必要 で す 。 














関連 項目 ゅ 





e 図形 を 回 転 さ せる …… ド oo D.51 ら 
e 図形 を 拡大 ・ 縮 小さ せる …… ド oo p.516 
e 図形 や 画像 を 変形 させ る …… ド ドド ドド ドド ドド rr p.518 
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LIE9 1Chrome 」 Safari 5 | Firefox 4 1 Opera 11 | iOS4 1 Android2 !WP_ 
牛島 すま tEN-2 ラ 2 


図形 を 拡大 ・ 縮 小さ せる 


ここ で は 、 Canvas に 描く 図形 を 拡大 ・ 縮 小 ( ス ケー リン グ ) さ せる (描画 座標 系 を スケ ー リ ン 
グ す る ) 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<metq charset="utf-8"> 
<tttle>Sampte</t1t1e> 





<SCPtDpt src="]S/sqmple.]S"></scrtpt> 
</head> 
<body> 
<caqnvas wtdth="329" hetght="249"> 
Canvas 対 応 ブ ラウ ザ を 使用 し て 下さ い 
</CqanVQS> 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.aqddEventLtstener("toad" function(){ 
// Canvos 要 素 を 読み 出し 
var myCanvas = document.getELementsByTagName( "canvas")[9]: 
// コン テキ スト を 取得 
var context = myCanvas .getContext("2d"): 
tf (!context){ return: } 
// 塗り の 色 を 設定 
context.fi11Style = "rgbaC255、9, 9, 9.25)": 
// 四角 形 を 描画 
context.ftLLRect(59, 59, 159, 199): 
// 横 を 159%、 縦 を 59% に 
context.scale(1.5, 9.5): 
// 和沙 り の 色 を 設定 
context.ftlLLStyle = "rgba(9, 9, 255, 9.25)": 
// 四角 形 を 描画 
context.ftLLRect(59, 59, 159, 199): 
+, false): 


還 王 ピロ T| 口 N!-2 ラ クン ョ W 図形 を 拡大 ・ 縮 小さ せる 


ブラ ウザ で index.html を 表示 する と 、 拡大 ・ 縮 小 し た 図形 が 青色 の 場所 に 描画 され ます 。 
拡大 ・ 縮 小 し て いな い 図 形 は 赤色 の 場所 に 描画 され ます 。 


mmINl 下 払 大 ・ 縮 小 を 行う に は 「scale()」 メソッド を 使う 


Canvas の 2D Context で 図形 を 拡大 縮小 させ る に は 、| scale  」 メ ソ ッ ド を 使い ます 。 
パラ メー タ に は 、 倍率 を 指定 し ます 。 倍率 は 数 値 で 指定 し 、「1.0] が 1009%% サ イズ 、| 0.5」 
な ら 50%、「2.0」] な ら 200% を 示し ます 。 

[scale() 」 メ ソ ッ ド で 拡大 ・ 縮 小 す る と 、 原点 を 基準 に し て 行わ れ ま す 。 原点 は 、 
形 の 左上 や 中 心 の 座標 で は な い 点 に は 注意 し て くだ さい 。 

また 、「scale() 」 メ ソ ッ ド で 拡大 ・ 縮 小 し た 後 、 指定 前 の 状態 に 戻す に は 、| scale() 」 
メソ ッ ド の 実行 前 に 「save() 」 メ ソ ッ ド を 使っ て 情報 を 保存 し て お きま す 。 元 に 戻す 場合 に 
は 、「restore() 」 メ ソ ッ ド を 使い ます 。 な お 、「restore() 」 メ ソ ッ ド を 実行 する と 拡大 ・ 縮 小 
に 関す る 以外 の 情報 も 元 に 戻る の で 注意 が 必要 で す 。 





関連 項目 | 
e 図形 を 回 転 さ せる …… ド ドド ドド p.518 
e 図形 を 移動 させ る …… の ドド rr p.514 
e 図形 や 画像 を 変形 させ る ……… ド ドド mc p.518 





人 ハハ G/]5 SBAUBO/SBAUB^) に に 本 :4 ミ 
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LIE9 』 Chrome 」 Safari 5 | Firefox 4 1 Opera11 1 iOS4 ! Android2 WP 」 


=1 コ mlmINB ン レン 
図形 や 画像 を 変形 させ る 


ここ で は 、 描画 する 図形 や 画像 、 テ キス ト を 変形 させ る 方 法 に つい て 解説 し ます 。 
ロ HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<t1ttle>SampLe</t1t1e> 








L 品 | 


けり <SCr1pt src="]s/sqmple.]S "></scrtpt> 
</head> 
<body> 

<cqnvos width="329" hetght="249"> 
Canvgs 対 応 プ ラウ ザ を 使用 し て 下さ い 


</CanVQS> 


9 ロ 


本 We 
中 </html> 


d JavaScript の コー ド (sample.js) 
window.gddEventLtstener("togd"。functionOt 

// Cgnvags 要 素 を 読み 出し 

Var myCanvaqs = document.getElLementsByTagName( "canvas")[9] : 

// コン テキ スト を 取得 

var context = myCanvas.getContext( "2d"): 

1tf (!context){ return: 

// フォ ント と サイ ズ を 設定 する 





M 
ー| context.font = "24pt "Tahoma-Botd'": 
| // 変形 する 
困 context.transform(9.5, 9, 9, 2, 9, 9): 
// 文字 を 描画 する 


context.ftltStyle = "orange": 
context.ftllText("Shadow Sqmptle", 19, 59): 

// 現在 の 変形 に 加え て さら に 変形 する 

var rad = -45 * Math.P1 / 189: 

var ks = Math.stn(rad): 

var kc = Math.cos(rad): 

context.transform(kc, ks, -ks, kc, 199, 129): 

// 文字 を 描画 する 

context.ftlLStyle = "blLue": 
context.ftllText("Shadow Sgqmpte", 9, 9): 

// 現在 の 変形 を 破棄 し て 新た に マト リッ クス を 設定 
context.setTransformCkc, ks。 -ks, kc, 199, 120): 
// 文字 を 描画 する 

context.fi11Style = "red": 4 


と II 
ら 人 ハハ G/ 有 5 SBAUBO/SBAUBO に まき Sa 
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生 王 ビ ロイ T| 口 NN-22 コ 3 m 図形 や 画像 を 変形 させ る 


context.fitttText("Shadow Sample" 9, 9): 4 
+。 false): 


プラ ウザ で indexhtml を 表示 する と 、 変形 設定 し た 文字 が 描画 され ます 。 ここ で は 、 ス ケー 
ル を 指定 し た 文字 、 さ ら に 回 転 を 加え た 文字 、 新た に 回 転 の み を 指定 し て 文字 を 描画 し て い 
ます 。 


図形 や 画像 を 変形 べ せ る に は 
「transform()」 メ ソ ッ ド や 「setTransform()」 メ ソ ッ ド を 使う 


描画 する 図形 や 画像 は 変形 させ る メソ ッ ド に は 、「transform() 」 メソッド と [set 
Transform() | メソ ッ ド が あり ます 。 それ ぞ れ 、 書式 は 、 次 の よう に な り ま す 。 


ロロ NEPHINT 





transformCm11。m12。m21, m22, dx, dy) 


setTransformCm11。m12,。m21,m22, dx, dy) 


「transform () 」 メ ソ ッ ド は 、 現 在 の 変形 に 、 さ ら に 指定 し た 変形 を 加え ます 。 | setTrans 
form( ) | は 、 現在 の 変形 設定 を 初期 化し 、 新た に 指定 し た マト リク ス で 変形 を 設定 し ま 
す 。 変形 マト リク ス は 、 次 の よう に な り ま す 。 


bu 北 、 層 0 2 


人 ハハ G/]6 SBAUBO/SBAUE バ ) 革 世 き 盾 4 ミロ 


「transform() 」 メソ ノッ ド は 、[「scale() 」 メソッド 、「rotate() 」 メ ノッ ド 、「translate()」 メ 
ソ ッ ド で の 変形 を 一 括 し て 行う こと が で きま す 。「setTransform() 」 は 、 これ ら の 変形 設 
定 を 初期 化す る 場合 に も 使う こと が で きま す 。 





e 図形 を 回 転 さ せる ro の GreeT p.51 ら 
e 図形 を 移動 させ る …… ド ドド ドド に p.514 
きま 図形 を 拡大 。 縮小 させ る FRR で を アヤ て て も CE さと そく まい SKK ん まい メシ DLT D.5 1 信 


519 





り AS/QE SBAUBO/SBAUBO ココ ユ ロマ ロコ 





520 


LIE9 』Chrome 』 Safari 5 | Firefox 4 1 Opera 11 1 iOS4 | Android2 1WP_ 


=1 コ mMlmIN ロ ン レ シア 
バス 内 に 座標 点 が ある か 調べ る 


ここ で は 、 パス 内 に 座標 点 が ある か 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttle>Sqampte</t1t1e> 
<SCrtpt src="]S/sqmple.]S "></scrtpt> 
</head> 
<body> 
<cgnvaSs wtdth="329" hetght="249"> 
Canvas 対 応 プ ブラ ウザ を 使用 し て 下さ い 


</CqanVQaS> 








<formW> 
<P>X:<tnput type="text" stze="6" value=" の 9" 1d="xp"></P> 
<P>Y:<tnput type="text" size="6" vqlue=" の 9" 1d="yp"></Dp> 
<tnput type="button" vatue=" チ ェ ッ ク " id="checkBtn"> 

</form> 

<OUtDu キ ></OUtDut> 

</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventListener("1ogd" functton(){ 

Var ele = document.getElementsByTagName( "output")[9] : 

// Caqnvas 要 素 を 読み 出し 

Var myCanvas = document.getEtementsByTagName( "canvas ")[9] : 

// コン テキ スト を 取得 

var context = myCanvas .getContext("2d"): 

tf (!context){ return: + 

// 新規 に パス を 作成 し 、 三角 形 を 描く 

context.begtnPath( ): 

context.moveTo( の ,9): 

context. LtneTo(319, 89): 

context.ltneTo(29, 249): 

context.closePath(): 

context.ftlLStyle = "rgba(255,255.9, 9.5)": 

context.ft11(): 

// ボタ ン が クリ ッ ク さ れ た ら 指 定 し た 座標 が パス 内 か どう か 調べ る 

document .getELementByTdC"checkBtn").qddEventListenerC"cLick"。functionO1 
// 入力 され た X, Y 座 標 値 を 読み 出し 
Var X = document.getEtementById("xp").vatue K4 





m 選 ビ ビ TI ロロ N-2224 m バス 内 に 座標 点 が ある か 調べ る 


var y = document.getEtementById("yp").yatlue: 4 
// X, Y 座 標 が 現在 の パス 内 か どう か 調べ る 

var flag = context.1sPotntTnPath(Cx, y): 

// 結果 を 出力 

ele.innerHTML = flog: 


+。 false): 
+。 foqlse): 


ブラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド に 座標 値 を 入力 し て ボタ ン を クリ ッ ク す る 
と 、 指定 し た 座標 値 が パス 内 か どう か を 返し ます 。 パス 内 の 場合 は 、 次 の よう に | true」 に な り 
ます 。 





パス 外 の 場合 は 、| false」 に な り ま す 。 








り ハ S/ 有 UE SBAUEO/SPAUE て ) に に AE 
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生 ビビ ピ T| 口 NN-22 4 mW バス 内 に 座標 点 が ある か 調べ る 


= 良 sl バス 内 に 座標 点 が ある か 調べ る に は 「isPointInPath() 」 メ ソ ッ ド を 使う 


パス 内 に 座標 点 が ある か 調べ る に は 、「isPointInPath() 」 メ ノッ ド を 使い ます 。 パラ 
メー タ に は 、 調べ た い X 座 標 と Y 座 標 を 指定 し ます 。 パス 内 で あれ ば 「true」、 パス 外 で 
あれ ば | false」 を 返し ます 。 調べ る パス は 、|「 beginPath () 」 メ ノッ ド を 使わ な い 限り 、 最後 
に 作成 し た パス が 対象 に な り ま す 。 

な お 、Opera 11.0 一 12.0 で は 、 パ ス の 開始 点 な ど 、 本 来 パ ス 内 で ある に も か か わら ず 、 
| false]」 と な っ て し まう 場合 も あり ます (下図 参照 )。 





り ハ S/UC SEAUEO/SEAUEO に EL4 ュ は 


ら 22 


LIE9 Chrome | Safari 5 1 Firefox 4 1 Opera11 OS4 1 Android2 !WP 


トー1 = 和博 時 便 問 聞 0 に に ルン ンー 
Canvas の 状態 を 保存 ・ 復 元 す る 


ここ で は 、 Canvas の 状態 を 保存 ・ 復 元 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttle>Sqmpte</t1tle> 
<SCrtpt src="]S/sample.]S"></SCr1Dt> 
</head> 
<body> 
<caqnvoas wtdth="329" hetght="249"> 
Canvas 対 応 ブ ラウ ザ を 使用 し て 下さ い 
</CanVQS> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window.aqddEventListener("1oqd" 。 functton(){ 
// Caqnvas 要 素 を 読み 出し 
var myCanvas = document.getELementsByTagName("canvas")[9] : 
// コン テキ スト を 取得 
var context = myCanvas .getContext("2d"): 
tf (!context){ returni } 
// 徐 り の 色 を 設定 
context.ftlLStyle = "green": 
// 状態 を 保存 
context. save( ): 
// 不透明 度 を 設定 
context.gLobalALpha = 9.2: 
// 四角 形 を 回 転 描画 (19 回 繰り 返す ) 
forCvar 1= の 9: 1<369: 1+=36)1{ 
// 状態 を 保存 
context . save( ): 
// 移動 & 回転 
context.translate(169, 129): 
context.rotate(1 * Math.PI/189): 
// 四角 形 を 描画 
context.ftLLRect(9, 9, 159, 199): 
// 状態 を 復元 


context . restore( ): 
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還 ビビ ピ T| 口 NN-225 mw Canvas の 状態 を 保存 ・ 復 元 する 


// 最上 部 に 四角 形 を 摘 画 2) 
context.ftlLRect( の 9, 9, 329。 19): 
// 状態 を 復元 
context.restore( ): 
// 最 下 部 に 四角 形 を 描画 
context.ftLLRect( の 9, 239, 329, 19): 
}, faqlse): 


プラ ウザ で index.html を 表示 する と 、「save() 」 メ ノッ ド と 「restore() 」 メ ソ ッ ド を 使い 、 図形 
が Canvas の 中 心 で 回 転 す る よう に 描画 され ます 。 





Canvas の 状態 を 保存 する に は 「save()」 メ ソ ッ ド 、 
復元 する に は 「restore()」 メソッド を 使う 


Canvas で は 、| save() 」 メ ソノ ッ ド を 使う こと で 、 現在 の Canvas の 状態 を 保存 する こと が 


LNEPUHINT 





で きま す 。 | save() 」 に より 保存 し た 情報 を 元 に 戻す に は 、「restore () 」 メ ノッ ド を 使い ま 
す 。「save() 」 メ ノッ ド を 実行 し た 場合 、 Canvas 内 の ピク セル 情報 は 保存 され ませ ん 。 
保存 され る の は 、 次 の プロ パテ ィ に な り ま す 。 

* StrOkeStyle e flStyle 

@ 戸 |ODaIAIpha elineWidth 

@ lineCaD @ lineJoin 
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e miterLimit * ShadOwOffsetX 

e ShadOwOUffsetY * ShadOwBIlur 

e ShadOwColor @ 互 IODalComposite0Uperation 
@ TOnt e textAIIgn 

9 textBasSeline 
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Canvas に 描画 済み の 内 容 を スク ロー ル す る 


ここ で は 、 Canvas に 描画 済み の 内 容 を スク ロー ル す る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>Sample</tttle> 
<SCrtpt src="]S/sample.]S "></SCrtDt> 
</head> 
<body> 
<canvas width="329" hetght="249" style="border:1px soltd black""> 
Canvos 対 応 プ ブラ ウザ を 使用 し て 下さ い 
</CanVQS> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("tLoad" 。 functton(){ 
// Cqnvos 要 素 を 読み 出し ZD コン テキ スト を 取得 
var myCanvas = document.getElLementsByTagName( "caqnvas")[9]: 
var context = myCanvoas .getContext("2d"): 
// 描画 を 描画 する 
var tmgOb] = new Image(): 





1tmg0b]}.src = "1mages/sqmpte.]Dg': 
tmgOb].ontogd = functton(){ 
// 画像 が 読み 込ま れ た ら Coanvas に 描画 
context.drawImage(thts, 9, 9): 
// スク ロー ル 処 理 を 行う 
setTnterval("scrolLDown()" , 199): 
} 
}, false): 
// スク ロー ル 処 理 ( て 上 か ら 下 ) 
functton scrollDown(){ 
// Canvas 要 素 を 読み 出し ZD コン テキ スト を 取得 


var myCanvas = document.getEtementsByTogName( "canvas")[9] : 


人 ハハ ご /]5 SBAUBEO/SBA ハ UE() に に まき:4 ミ ドロ 


var context = myCanvos .getContext("2d"): 

// Canvas の 幅 を 取得 

Var W = myCanvos .w1dth: 

var h = myCanvos .hetght: 

// Canvags 内 の ピク セル デー タ を 読み 出す 

var ptxelData = context.getImageDatao(9.9, w, h): 
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mW ビ ピロ TI ロ NN -226 mw Canvas に 描画 済み の 内 容 を スク ロー ル す る 


// 一 番 下 の ピク セル デー タ を 読み 出す 5 
var ptxelLDataLoast = context.getTmageData(9,h-1。w, 1): 

// それ ぞ れ を 特定 の 座標 に 描画 する 

// 大 き な 画 像 は Y=1 の 座標 に 描画 

context . DutImageData(ptxelData,。 9,1): 

// 一 番 下 の ピク セル は Y=9 の 座標 に 描画 

context . putTmageData(ptxelDataLast、 9,09): 


ブラ ウザ で index.html を 表示 し 、 ペー ジ が 読み 込ま れる と 、 Canvas に 描画 され た 画像 が 
F ト か ら 下 に スク ロー ル し ます 。 









Ts anvas の 内 容 を スク ロー ル す る に は 
「getImageData()」 メ ソ ッ ド と 「putlImageData()」 メソッド を 使う 





Canvas に 捕 画 済み の 画像 や 図形 を スク ロー ル す る に は 、2D コ ン テ キ スト の 「 getImage 
Data() 」 メ ノッ ド と | putImageData() 」 メ ソ ッ ド を 利用 し ます 。 ま ず 、「getImageData() 」 メ 
ノッ ド を 使っ て 、 Canvas 内 の 画像 デー タ を 取得 し ます 。 この と き 、 スク ロー ル し て 消え る 端 
の ビク セル 部 分 は 別に 取得 し て お きま す 。 

挫 に 、| putImageData) 」 メソッド を 使っ て 、 座標 を ずら し て 描画 し ます 。 これ で 
Canvas 画 僚 が スク ロー ル し た こと に な り ま す 。 た だ し 、 この まま で は 端 の ピク セル 情報 が 
消さ れ て し まい ます 。 そこ で 、 先 ほど 、| getImageData () 」 メ ノッ ド で 取得 し て お いた 端 の 
ビク セル 部 分 を 描画 し ます 。 これ で 画像 が スク ロー ル し た こと に な り ま す 。 タイ マー を 使っ 
て スク ロー ル 処 理 を 呼び 出せ ば 、 Canvas に 描画 され た 画像 が 延 を と スク ロー ル す る こと 
に な り ま す . 

















LIE9 』Chrome 1 Safari 5 | Firefox 4 1 Opera11 』 iOS4 』 Android4 IWP」 


ニー1 = 直 時 間 上 田 有 に ピン イン 4 


Canvas の 画像 デー タ を dataUHL 形 式 に 
変換 する 


ここ で は 、 Canvas の 画像 デー タ を dataURL 形 式 に 変換 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metq Charset="utf-8"> 
<tttle> SagmDpLe</t1tle> 
<SCPtpt Src="]S/sample.]S"></SCrtDt> 
</head> 
<body> 
<canvoas width="32 の 9" hetght="240"> 
Canvos 対 応 ブ ラウ ザ を 使用 し て 下さ い 
</CqnVQaS> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow . addEventLtstener("1ogd" 。 functton(){ 
var ele = document.getEtementsByTagName( "output") う [9]: 
// Canvas 要 素 を 読み 出し 
var myCanvas = document .getEtementsByTagName( "caqnvas")[9]: 
// コン テキ スト を 取得 
var context = myCanvos .getContext( "2d"): 
tf (!context){ return: } 
// 画像 を 描画 する 
var tmgOb] = new Image(): 
1tmgOb].src = "1mages/matsumoto.]Pg': 
1mgOb].ontogd = functton()+ 
context .drawTmage(thts, 9 の, 09): 
// ピク セル デー タ を 読み 出し PNG 形式 に する 
var datog = myCanvas .toDataURL("1mage/png"): 
// 変換 結果 を 画面 に 出力 
ele.tnnerText = ele.textContent = datq: 
} 
+ す false): 
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思 ビ ピロ TI ロ NN -227 mw Canvas の 画像 デー タ を dataUHL 形 式 に 変換 する 


ブラ ウザ で index.html を 表示 する と 、 Canvas 内 の ビク セル デー タ が 変換 され た 結果 が 表 
示さ れ ま す 。 


ビク セル デー タ を datUHRHL 形 式 に 変換 する に は 
[toDataURL()」 メソッド を 使う 


Canvas に 描画 され た 内 容 を dataURL 形 式 に 変換 する に は 、「toDataURL() 」 メ ソ ッ 
ド を 使い ます 。「toDataURL() 」 メ ソ ッ ド の パラ メー タ を 省略 し た 場合 は 、PNG 形 式 の 
画像 に 変換 され ます 。| image/jpeg」 と する と 、 TPEG 形 式 に 変換 され ます 。 た だ し 、 
PNG 形式 以外 で は 、 プラ ウザ に よっ て 変換 され な いこ と が あり ます 。 

Bm メソッド に よっ て 変換 され た デー タ は 、|img」 要素 の 「src] プロ パテ ィ 

に 代入 し て 画像 と し て 表示 する こと が で きま す 。 これ を 利用 し て 、Canvas で お 絵かき 
Ni 場合 の 取り 消し 機能 や 、File API を 使っ て デー タ を 保存 する こと が で き 
ます 。 


mml 紅 較 一 力 ル ディ スク 上 で の 動作 


Google Chrome な どの ブラ ウザ で は セキ ュ リ ティ の 関係 で 、 ロー カル ディ スク 上 で 
動作 し て いる 場合 、 画像 デー タ を 描画 で き て も 読み 出す こと が で きま せん 。 この た め 、 
| toDataURLO 」 メ ソ ッ ド を 実行 し て も 画像 デー タ と し て 変換 する こと は で きま せん 。 
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@ 画像 を ロー カル スト レー ジ に 保存 する 相 ① ふ ふ …… の …… ド (ドド トード ーー ジーー D.529 


LIE9 1 Chrome 1 Safari 5 1 Firefox 4 1 Opera11 1 iOS4 1 Android4 1WP」 


EE: 1 い N- 選 スロ 
画像 を ロー カル スト レー ジ に 保存 する 


ここ で は 、 画像 を ロー カル スト レー ジ に 保存 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meto charset="utf-8"> 
<tttle>SamplLe</t1tle> 
<scrtpt src="]S/Sample .]S"></SCr1Dt> 
</head> 
<body> 
<form> 
<tnput type="button" id="save" vgtue=" ロ ー カ ルス トレ ー ジ に 保存 "> 
</form> 
<canvas wtdth="329" hetght="249"> 
Canvos 対 応 プ ラウ ザ を 使用 し て 下さ い 
</CqanVQS> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 
witndow .addEventLtstener("1ogd" 。 functton()# 
// Canvas 要 素 を 読み 出し 
var myCanvas = document.getELementsByTagName("canvas")[9]: 
// コン テキ スト を 取得 
var context = myCanvas.getContext("2d"): 
tf (!context){ return: } 
// 画像 を 描画 する 
var tmgOb] = new Image(): 





1imgOb].src = "1mages/sunftower.]pg?1": 
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tmg0b]〕.ontoad = functton()1 
// 座標 を 指定 し て 元 の サイ ズ で 描画 
context.drawImage(thts, 9, の ): 
// 画像 の まわ り に 白い 半 透 明 の 枠 を 描画 
context.strokeStyle = "rgba(255,255,255, 9.7)": 
context.tineWidth = 109: 
context.strokeRect(5,5, 319, 239): 

} 

// ボタ ン に イベ ント を 設定 

document . getEtementById( "save").qddEventLtstener("cLtck", functton(){ 
// ピク セル デー タ を 文字 列 に 変換 
var datog = myCanvas .toDataURLC"1mage/png"): 
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m5E じ TIHN-22 日 還 画像 を ロー カル スト レー ジ に 保存 する 


// ロー カル スト レー ジ に 保存 ド 
localStorgge . setItem( "pixelDqta", datg): 
// 確認 の ダイ アロ グ を 表示 


glert(data.1ength+" 文字 分 、 保存 し まし た "): 
}, fqlse): 
}。fglse): 


プラ ウザ で index.html を 表示 する と Canvas に 画像 が 表示 され 、 その 後 、 ボ タン を クリ ッ ク す 
る と ロー カル スト レー ジ に 画像 デー タ が 保存 きれ ます 。 





保存 され る と 、 保存 し た 文字 数 が アラ ー ト ダイ アロ グ に 表示 され ます 。 


| 246150 文 字 分 、 保 存 し まし た 





保 仔 内 容 は 、 デバ ッ ガ を 使っ て 確認 する こと が で きま す 。 





m ビ ビ ビ TI ロ N-22 日 m 画像 を ロー カル スト レー ジ に 保存 する 


= ヨコ sj 記紀 画像 を 保存 する に は 「toDataURL()」 メソッド を 使う 


Canvas に 表示 され て いる 画像 デー タク を ロー カル スト レー ジ に 保存 する に は 、| toData 
URL() 」 メ ソ ッ ド を 利用 し ます 。 これ は 、 Canvas に 用 意 さ れ て いる メソ ッ ド で 、 画像 デー タ 
を 文字 列 (BASE64 形 式 ) に 変換 し ます 。「toDataURL() 」 メ ノッ ド の パラ メー タ に は 、 
変換 する 画像 形式 の MIME タ イプ を 指定 し ます 。 省 略す る と 、| image/png] に な り ま す 。 
また 、「image/jpeg」 と する と PEG 形 式 の デー タ に な り ま す が 、 プラ ウザ に よっ て は 対応 


し て いな い 場 合 も あり ます 。 

文字 列 に 変換 し て し まえ ば 、 後 は 「localStorage」 の | setItem () 」 メ ソ ッ ド を 使っ て 
キー 名 を 付け て デー タ を 保存 し ます 。 保存 し た デー タ を 読み 出し 、 再度 、Canvas に 捕 画 
する に は 「Image」 オ ブ ジ ェクト を 作成 し 、 その 「src]」 プロパ ティ に ロー カル スト レー ジ に 保 
存 し た Canvas デ ー タ を 設定 し ます 。 その 後 、 画像 が 読み 込ま れ た ら 「 drawImage () 」 メ 
ソ ッ ド を 使い 、 Canvas 上 に 描画 し ます 。 


mm 部 IN 一 一 力 ル ディ スク 上 で の 動作 


Google Chrome な どの ブラ ウザ で は セキ ュ リ ティ の 関係 で 、 ロー カル ディ スク 上 で 動 
作 し て いる 場合 、 画像 デー タ を 描画 で き て も 読み 出す こと が で きま せん 。 この た め 、 サン 
プル の よう に 、「toDataURL() 」 メ ノッ ド を 実行 し て も 画像 デー タ と し て 変換 する こと は で き 
ませ ん 。 














内 放 引 良三 邊 用 
あ Canvas の 画像 デー タ を dataUHL 形 式 に 変換 する 生生 か すい に た で で 02 て 2 まい ッ ん 91 D.5 ら / 
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LChrome 1 Safari 5 | Firefox 4 
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WebGL が 利用 で きる か 調べ る 








ここ で は 、 Canvas で 3D 描 画 を 行う 際 に 必要 な WebGL が 使用 可能 か 調べ る 方 法 に つい 
て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>Sqmpte</tttte> 
<SCrtpt Src="]s/sqmple.]S"></scrtpt> 
</hegd> 
<body> 
<h3>WebGL チ ェ ッ ク </h3> 
<d1V><OutDut></Output></d1V> 
<canvos wtdth="489" hetght="64"> 
Canvos 対 応 プ ラウ ザ を 使用 し て 下さ い 
</cgnVQSs> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oad" , function(){ 
Var ele = document.getELementsByTagNgme( "output")[9] : 
// Canvas 要 素 を 読み 出し 
Var myCqnvas = document.getElLementsByTagName("caqnvas")[9] : 
// WebcL コ ン テ キ スト を 取得 
var context = myCanvoas .getContext( "webg1") 1| myCagnvas . getContext("expertmental-webg1"): 
1f (context == null){ 
ele.innerHTML = "WebGL は 使用 で きま せん ": 
+else{ 
ele.innerHTML = "WebGL は 使用 で きま す ": 
} 
}, faltse): 


gm ヒロ T| 口 NN -2 9 mw WebGL が 利用 で きる か 調べ る 


ブラ ウザ で index.html を 表示 する と 、 WebGL が 使用 可能 か どう か 調べ た 結果 が 表示 され 
ます 。 Google Chrome で は WebGL が 利用 で きる の で 、 使用 可能 で ある と の 文字 が 表示 さ 
れ ま す 。 


WebGL チ ェ ッ ク 
WebGL は 使用 で きま す 


WebCL チ ェ ッ ク 
WebGL は 使用 で きま せん 





misI ド lm 下 3D 措 画 が 可能 か 調べ る に は 「getContext()」 メソ ッ ド を 使う 


Canvas で 3D 描 画 が 可能 か どう か 調べ る に は 、| getContext() 」 メ ソ ッ ド を 使い ます 。 
Canvas で 3D 描 画 を 行う 際 に は WebGL が 利用 され る の で 、| getContext() 」 メ ソ ッ ド の 
パラ メー タ に 「"webgl' | 、 ま た は 、「 "experimentalLwebgl 」 の 文字 列 を 指定 し ます 。 

な お 、 1 つの Canvas に は 2D か 3D の どちら か 一 方 し か 利用 する こと は で きま せん が 、 2D 
と 3D の Canvas を 重ね 合わ せ て 表示 する こと は で きま す 。 

[getContext() 」 メ ノッ ド で 指定 し て いる 「 "experimentaLwebgl 」 は 、 仕様 が 確定 す 
る まで に 使用 され る 一 時 的 な も の で す 。 仕様 が 確定 し た 場合 は 、| Webgl 」 と な り ま す 。 
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LChrome Safari 5 | Firefox4_ 


ら E ヒ ロリ 11 品 NN-23 口 


Three.jS を 使っ て 3D 処 理 を 行う 








上 | 
「| ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Three.js ラ イブ ラリ を 使っ て 3D 処 理 を 行う 方 
ロ 法 に つい て 解説 し ます 。 
ーー HTML の コー ド (index.html) 
G <!DOCTYPE html> 
ーー <html> 
財 <head> 
eo <metg charset="utf-8"> 
<title>Sample</title> 
ei <Scrtpt src="]s/Three.]S "></scrtpt> 
<scrtpt src="]s/sample.]s"></scrtpt> 
| </head> 
| <body></body> 
ーー </html> 
品 
JavaScript の コー ド (sample.js) 
| wtndow.gddEventLtstener("1ogd" function(){ 


// Three.js を 初期 化 
var renderer = new THREE.WebGLRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 329 ピ クセ ル 
renderer.setSize(329, 329): 
// Three .js に よっ て 生成 され た canvgs を ペー ジ の 末尾 に 追加 
document .body .gppendCht1dCrenderer .domE1ement): 
// カメ ラ を 初期 化 
Var' camera = new THREE .PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 
camera.PpoSttton.set(55, 49。 49): 
cgmera.lookAt( fx: の 9, y:9 の , z: の 9 } ): 
// オプ ジェ クト を 初期 化す る 
Var cube = new THREE .Mesh( 

// 四角 形 の XYZ サ イズ を 設定 

new THREE .CubeGeometry(39, 39, 39), 

// ワイ ヤー フレ ー ム 表示 。 色 は 青 

new THREE .MeshBastcMatertal({ 

"Color" : の x9990ff , 
"wtreframe" : true 
}) 





5 ハハ 6/5 SBAUBO/SBAUBC) 記 基 | VH コロ 


う : 

// シー ン を 初期 化す る 

var scene = new THREE .Scene(): 
// 立方 体 を 3D シ ー ン に 追加 
scene .qdd(cube): 
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生 王 己 ロ TI 口 N-2 コ ロ m Three.jS を 使っ て 3D 処 理 を 行う 


// カメ ラ を 3p シ ー ン に 追加 “ 人 
scene .qdd(camerga): 
// レン ダリ ング 
renderer.render(scene, Camero): 
+, false): 


ブラ ウザ で index.html を 表示 する と 、 青色 で ワイ ヤー フレ ー ム の 立方 体 が 描画 され ます 。 








msISk 画 3D 処 理 を 簡単 に 行う に は Three.jS を 使う 


Canvas で の WebGL を 利用 し て 3D 処 理 を 行う に は 、 か な り 多 く の 手順 が 必要 に な り ま 
す 。 面倒 な 3D 処 理 を 簡単 に 行え を る ライ ブラ リ と し て 、 Three.js が あり ます 。 Threejs を 利 
用 し て 3D 処 理 を 行う に は 、 次 の よう に し ます 。 

まず 、 Three.js フ ァイル を 読み 込み ます 。 他 に 必要 な ファ イル は あり ませ ん 。 

[new THREE.WebGLRenderer() 」 と し て レン ダリ ング する た め の オ プ ジ ェ クト を 生成 
し ます 。 レン ダリ ング 領域 の サイ ズ は 「setSize()) 」 メ ノッ ド で 行い 、 横幅 と 縦 幅 を ビク セル 数 
で 指定 し ます 。 生成 され た オブ ジェ クト に は Canvas 要 素 が 含ま れ て いる の で 、 これ を ペー 
ジ 上 に 出力 し ます 。 また 、 デフ ォ ル ト で は アン チエ イリ アス が か か ら な い の で 、 必要 で あれ ば 
「THREE.WebGLRenderer () 」 の パラ メー タ に 「『antialias" : true「」 を 指定 し ます 。 

次 に カメ ラ の 設定 を 行い ます 。 Threejs に は 、 平行 法 と 遠近 法 を 利用 し た カメ ラ が 
用 意 さ れ て いま す 。 3D で 多く 見 られ る シー ン は 、 遠近 法 を 利用 し た も の に な っ て いま す 。 
Three.js で は 、「new THREE.PerspectiveCamera() 」 と し て 遠近 法 を 利用 し た カメ ラ 
を 生成 で きま す 。 カメ ラ 位 置 は | position.set() 」 メ ノッ ド を 使い 、 XX 座標 と Y 座 標 、Z 座 標 
を 指定 し ます 。 また 、「]lookAt() 」 メ ソ ッ ド を 使っ て 計算 処理 を 行い ます 。 

次 に 描画 する 立方 体 を 生成 し ます 。 立方 体 の 生成 は 、「new THREE.Mesh() 」 と し 
て 行い 、 パラ メー タ に は 生成 する 立方 体 の サイ ズ と マテ リア ル を 指定 し ます 。 

次 に シー ン を 「new THREE.Scene() 」 と し て 生成 し ます 。 生成 し た シー ン に 、 先ほど 
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還 ビビ ピ TI ロロ N-2 コ ロ m Three.jS を 使っ て 3D 処 理 を 行う 


作成 し た 立方 体 と カメ ラ を 「add() 」 メ ノッ ド を 使っ て 追加 し ます 。 

後 は 「new THREE.WebGLRenderer() 」 と し て 生成 し た オプ ジェ クト の 「render() 」 メ 
ソ ッ ド を 使っ て 、 実際 の 描画 ・ 表 示 を 行い ます 。「render() 」 メ ノッ ド の パラ メー タ に は 、 シー 
ン オ プ ブ ジ ェクト と カメ ラオ ブ ジ ェクト を 指定 し ます 。 


な お 、 Threejs の 人 手先 は 、 次 の よう に な り ま す 。 
$ Three.jS 
https://github.Ccom/mrdoob/three.jS/ 





関連 項目 ょ ゅ 


キャ ワイ ヤー フレ ー ム 表示 の 幅 と 不透明 度 を 設定 する Me: 小室 な 4 D.537 
@ カメ ラ を 設定 する 牧人 め る 0 (人 宮 光生 湯 す 人. ま 宙 河 5E い お D.539 
の 光源 を 追加 する でかい し マサ すす トド が きま て ムペ た KOKXY ペ メス リオ と エア クセ ャ オッ アイ て 『 ヤリ すず を に は D.548 


5 だ [1N- ス コリ 


ワイ ヤー フレ ー ム 表示 の 幅 と 不 箕 明 度 を 
設定 する 


ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Three.js ラ イブ ラリ を 使っ て ワイ ヤー フレ ー ム 
表示 の 幅 と 不透明 度 を 設定 する 方 法 に つい て 解説 し ます 。 


= また WI 四 = 直 中 mm】 填 HTML の コー ド (index.htmD) 
<!DOCTYPE html> 
<html> 

<head> 


<meta charset="utf-8"> 








<tttte>SampLe</t1tle> 
<Scrtpt src="]S/Three .]S "></SCr1Dt> 
<SCrtpt src="]S/sqmple.]S"></SCrtDt> 
</head> 
<body></body> 
</html> 


JavaScript の コー ド (sample.js) 


witndow .qddEventListener("1oad" 。 functton(){ 
// Three .js を 初期 化 
var renderer = new THREE .WebGLRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 329 ピ クセ ル 
renderer.SetStze(329, 320): 
// Three.js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
document.body .appendChttdCrenderer .domELement): 
// カメ ラ を 初期 化 
var camera = new THREE.PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 
caomera.POSttton.set(55, 49, 49): 
camera.LookAt( {tx:9。y:9, zZ: の 9} ): 
// オプ ジェ クト を 初期 化す る 
var cube = new THREE .Mesh( 
// 四角 形 の XYZ サ イズ を 設定 
new THREE .CubeGeometry(39, 39, 39) , 
// ワイ ヤー フレ ー ム 表示 。 色 は 赤 。 不透明 度 は 9.25% 
new THREE .MeshBasicMatertal({ 
color : の xff9900, 
Wtreframe : tPue。, 
wtreframeLtnewtdth : 19, 
opactty: 9.25 
}) 
う : 
// シー ン を 初期 化す る 


var scene = new THREE.Scene(): 
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mm 王 ビ ビ ピ T 口 NN -23 1 mW ワイ ヤー フレ ー ム 表示 の 幅 と 不透明 度 を 設定 する 


// 立方 体 を 30 シ ー ン に 追加 も 4 
scene .qdd(cube): 
// カメ ラ を 3p シ ー ン に 追加 
scene . qdd(cqmera): 
// レン ダリ ング 
renderer.render(scene, caqmero): 
} す , faqlse): 


プラ ウザ で index.html を 表示 する と 、 赤色 で ワイ ヤー フレ ー ム の 立方 体 が 描画 きれ ます 。 
梓 の 幅 は 10 に 設定 し て いま す 。 








SI フン リ リー フレ ー ム の 幅 を 指定 する に は 「wireframeLinewidth」 プロ パテ ィ 、 
不透明 度 を 指定 する に は 「opacity」 プロ パテ ィ を 使う 


Threejs で 表示 する 物体 を ワイヤー フ レー ム に する に は 、 マテ リア ル を 設定 する オプ 
ジェ クト で | wireframe」 プロ パテ ィ に 「true」 を 設定 し ます 。 ワイ ヤー フレ ー ム の 線 の 幅 を 
旧 定 す る に は 、「 wireframeLinewidth」 プロパ ティ に 単位 な し の 値 を 指定 し ます 。 

表示 する 物体 全体 の 不透明 度 を 指定 する に は 、「opacity」 プ ロ パ ティ に 「00」 一 
「1.0] ま で の 小数 値 を 指定 し ます 。「0」 だ と 完全 な 人 透 明 に な り 、「1.0」 だ と 完全 な 不 透 
明 に な り ま す 。 

な お 、Windows 7 上 で は 、Google Chrome 21、Firefox 14 と も 、[ wireframeLimnewidth 」 
プロ パテ ィ の 値 は 反映 され ず 、 ワイ ヤー フレ ー ム の 線 幅 は 「1」 に な り ま す 。 














関連 項目 pl 


3 Three.jS を 使っ て 3D 処 理 を 行う が 入信 も 光生 4 定 を あげ (人 受光 が 48 演出 0 科 IeS IE は p.534 
の カメ ラ を 設定 する SA や NAIKIAALY YK) 1 エメ ツリ すす サヤ CDS 補 の の 2 D.539 
の 光源 を 追加 する と プス KAY AP 内 は 91US D.54 ら 


LChrome Safari 5 Firefox4_ 


ー1 = 間 里 誠 半田 アン サ ピ タン 


カメ ラ を 設定 する 





(em 
ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Three.js ラ イブ ラリ を 使っ て カメ ラ を 設定 する と 
方 法 に つい て 解説 し ます 。 還 
HTML の コー ド (index.html) ーー 
<!DOCTYPE html> 軸 


<html> ーー 
<head> 
<meta charset="utf-8"> 
<tttle>Sqmpte</t1tle> 


ロ 

ト 
『 

UI 

<Scrtpt src="]S/Three.]S"></SCrtpt> ae 

<SCrtpt src="]S/sample .]S"></sCrtDt> 軸 
ロロ 

3 


</head> 
<body></body> 
</html> 
ロ 
JavaScript の コー ド (sample.js) 6 
wtndow.qddEventLtstener("1oad" , functton()+ 


// Three.js を 初期 化 
var renderer = new THREE .WebGLRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピク セル 
renderer.setStze(329, 329): 
// Three.js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
document . body .qppendCht1dCrenderer.domELement): 
// カメ ラ を 初期 化 
// var cameraq = new THREE.PerspectiveCamera(89, 1.9, 1, 19999): 
var camera = new THREE.0rthographtcCamera(-199, 199, 199, -199, 9.1, 2909): 
// カメ ラ 位 置 を 設定 
camera.position.set(55。 49, 4 の ): 
camera.lookAt( fx: の ,y: の 9, z:9} ): 
// オプ ジェ クト を 初期 化す る 
var cube = new THREE .Mesh( 

// 四角 形 の XYZ サ イズ を 設定 

new THREE .CubeGeometry(69, 69, 69), 

// ワイ ヤー フレ ー ム 表示 。 色 は 赤 。 不透明 度 は 9.25% 

new THREE .MeshBastcMatertgl({ 

Color : 9x990990, 
wtreframe : true, 


}) 





り AS/O SPAUEO/SPAUEO に EETEM4 ュ は 
っ 才 | | に 人 


| 


う : 
// シー ン を 初期 化す る 
var scene = new THREE .Scene(): 


生 ビビ ピピ T| 口 N -2 コ 2 m カメ ラ を 設定 する 


// 立方 体 を 3D り シー ン に 追加 4 
Scene .qdd( cube): 
// カメ ラ を 3D シ ー ン に 追加 
Scene . qdd(camera): 
// レン ダリ ング 
renderer.render(scene, camera): 
}, false): 


ブラ ウザ で index.html を 表示 する と 、 正 投 影 の カメ ラ の 場合 の 立方 体 が 表示 され ます 。 こ 
こ で は 、 わか りや すい よう に ワイ ヤー フレ ー ム 表示 に し て いま す 。 





度 視 投影 の カメ ラ の 場合 の 立方 体 は 次 の よう に 表示 され ます 。 画 角 に も より ます が 、 手前 に 
来る ほど 図形 が 両側 に 広がり 、 歪み ます 。 


り 八 / SBAUBO/SBAUB<) に に きこ に 4 ミト ma 
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琴 王 ピロ 丁 | 口 ト N| - ら コ 2 mw カメラ を 設定 する 


設定 で きる カメ ラ に は 透視 投影 の カメ ラ と 正 投影 の カメ ラ 、 
= ヨコ IM メラ う が あ る 


映画 や アニ メ な ど で 見 られ る CG で は 、 逃 視 投影 の カメ ラ が 使わ れ ま す 。 穫 視 投影 の 
カメ ラ は |「new THREE.PerspectiveCamera () 」 と し て 生成 し ます 。 パラ メー タ は 4 つ あ 
り 、 最初 が 画 角 、 次 が 縦横 比 、 次 が カメ ラ か ら 手 前 まで の 距離 、 最後 が カメ ラ か ら 興 ま 
で の 距離 と な っ て いま す 。 

製図 や CAD な ど で 使 われ る カメ ラ は 、 正 投 影 の カメ ラ が 使わ れ ま す 。 正 投影 の 場 
合 は 透視 投影 と 異な り 、 図形 が 距離 に よっ て 歪む こと は あり ませ ん 。 正 投 影 の カメ ラ は 、 
「new THREE.OrthographicCamera () 」 と し て 生成 し ます 。 パラ メー タ は 、 表示 する 
男 囲 の 左 座標 、 右 座 標 、 上 座標 、 下 座標 、 カ メラ か ら 手 前 まで の 距離 、 最後 が カメ ラ 
か ら 興 まで の 距離 と な っ て いま す 。 

他 に も 複合 カメ ラ と し て 、| THREE.CombinedCamera() 」 が 用 意 き され て いま す 。 











関連 項目 


を Three.jS を 使っ て 3D 処 理 を 行う 二流 お 本 0 (9 を を 補 宮 往生 が 本 も 9 本 66: が D.534 
ゃ リ イ ヤー フレ ー ム 表示 の 幅 と 不透明 度 を 設定 する 浅い 泊 導 (人 (: 人 人 玉 人 D.53/ 
e 光源 を 追加 する 本 本: を な: D.54 ら 





人 ハハ G/5 SBAUBO/SBAUB バ ) 攻 に に きこ に 4 ミト | 


画 有 | 





11 - の ココ 


光源 を 追加 する 








ロ 
ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Threejs ラ イブ ラリ を 使っ て 光源 を 追加 する 
肌 方 法 に つい て 解説 し ます 。 
ーー HTML の コー ド (index.html) 
了 <!DOCTYPE html> 
ーー <html> 
は <head> 
ーー <meto Charset="utf-8"> 
1 <title>Sample</tttle> 
aa <Scrtpt src="]s/Three .]S "></scrtpt> 
記 <SCrtpt Src="]S/sqmple .]S "></scrtpt> 
</hegd> 
ロ <body></body> 
6 </html> 
_ ロ 
日 JavaScript の コー ド (sample.js) 
* window.addEventLitstener("1ogd"。functiton(){ 
// Three.js を 初期 化 


var renderer = new THREE .WebGLRenderer(): 

// 描画 領域 の サイ ズ は 縦横 と も 329 の ピク セル 
renderer.setStze(329, 320): 

// Three.js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
documert.body .qppendChttd(Crenderer.domE1lement): 

// カメ ラ を 初期 化 

var camera = new THREE.PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 








人 ハ AG/5 SBAUBO/SBAUB ぐ ) コ ヨ ュ に 4 ニトロ m 





comerq.POSsitton . set(59, 49, 39): 
camera.tLookAt( tx: の 9, y: の , z: の 1 ): 
// オプ ジェ クト を 初期 化す る 
var cube = new THREE .MeshC 
// 立方 体 の XYZ サ イズ を 設定 
new THREE .CubeGeometry(29, 29, 29), 
// マテ リア ル を Lambert に 
new THREE .MeshLambertMatertalC{tcotor: 9x9999ff+) 
う : 
// シー ン を 初期 化す る 
var scene = new THREE .Scene(): 
// 立方 体 を 3D シ ー ン に 追加 
scene .qdd(cube): 
// カメ ラ を 3D シ ー ン に 追加 


scene .Qdd(cameroa): 


生 王 ビ ピロ 丁 | 口 NN-233 wm 光源 を 追加 する 


// 光源 を 追加 し 
var Ltght = new THREE.DtrecttonalLtght( の 9x9999ff 1.25): 
// 光源 の 位置 を 設定 
ltght.posttton. Set(299, 269, 199): 
scene .、qdd( Ltght): 
// レン ダリ ング 
renderer.render(scene, camero): 
+, false): 


プラ ウザ で indexhtml を 表示 する と 、 平 行 光 源 が 追加 され 、 青 色 の 立方 体 が 描画 され ます 。 





=i ョ = ョ l に 正平 行 光源 を 追加 する に は 「new THREE.DirectionalLight()」 と する 


Threejs で 平行 光源 を 追加 する に は 、「new THREE.DirectionalLight() 」 と し ま 
す 。 最初 の パラ メー タ に 光源 の 色 を 16 進 数 で 指定 し ます 。 2 番目 の パラ メー タ に は 、 光源 
の 強 さ を 指定 し ます 。 デフ ォ ル ト で は 、 光源 の 強 さ は 「1.0] に な っ て いま す 。 

次 に 、| position.set() 」 メ ソ ッ ド を 使っ て 、 兆 源 の 位置 を 設定 し ます 。 最後 に 、「add () 」 
メソ ッ ド を 使っ て 、 描画 シー ン に 光源 を 追加 し ます 。 

な お 、 Threejs に は 、 環境 光 ・ 平 行 光 ・ 点 光源 ・ ス ポッ トラ イト が 用 意 さ きれ て いま す 。 
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THREE.PointLight() 
THREE.SpotLight() スポ ッ ト ラ イト 





関連 項目 ゅ ぁ 


人 Three.jS を 使っ て 3D 処 理 を 行う 宮入 人 人 党 0 入 湖 公 め 生か る 8 箇 は か 90 本 61 D.534 
る ワイ ヤー フレ ー ム 表示 の 幅 と 不透明 度 を 設定 する 6 (89 人 者 人 06 ある 6 D.537 
@ カメ ラ を 設定 する を 泊 人 9 和信 洒 和 本 の を あな D.539 
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立方 体 を 生成 する 





ーー ロ 
過 ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る ThreejS ラ イブ ラリ を 使っ て 立方 体 を 生成 す 
肖 る 方 法 に つい て 解説 し ます 。 
当 
尺 
ロ 
も 


HTML の コー ド (index.html) 


<!DOCTYPE html> 


ーー <html> 

日 Jo 

ーーーー <metq Charset="utf-8"> 
ー <title>Samplte</t1t1le> 





<SCcrtpt src="]S/Three .]S"></sCrtDt> 


<SCrtDt src="]S/sqmple.]S "></scr1Dpt> 


か 
ーー </head> 
FI <body></body> 
ー」 </html> 
D 
JavaScript の コー ド (sample.jS) 
- window.aqddEventLtstener("1ogd",functionC){ 


// Three.js を 初期 化 
var renderer = new THREE.WebGLRenderer(fantiattqs: true}): 
// 描画 領域 の サイ ズ は 縦横 と も 329 ピ クセ ル 
renderer.SetStze(329, 329): 
// Three.js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
document . body .qppendChttd(renderer .domEtement): 
// カメ ラ を 初期 化 
var camera = new THREE.PerspecttveCaqmera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 
camera.PoSs1tton. set(39, 29, 55): 
camera.LookAt( {fx:9, y:9, z:9} ): 
// オプ ジェ クト を 初期 化す る 
var cube = new THREE .Mesh( 
// 立方 体 の XYZ サ イズ を 設定 
new THREE .CubeGeometry(35, 29, 19), 
// マテ リア ル を Loambert に 
new THREE .MeshPhongMatertal() 
う : 
// シー ン を 初期 化す る 
var scene = new THREE.Scene(): 
// 立方 体 を 3D シ ー ン に 追加 
scene . add(cube): 
// カメ ラ を 3p シ ー ン に 追加 
Scene . gdd(cqmera): 





| 
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/ 光源 を 追加 0 
var ltght = new THREE.DtrecttonalLtght(9x9999ff, 1.25): 

// 光源 の 位置 を 設定 

ltght.posttton. set(209, 269, 199): 

scene .qdd( ltght): 

// レン ダリ ング 

renderer.render(scene, Camera): 


+。fqlse): 


プラ ウザ で indexhtml を 表示 する と 、 青色 の 立方 体 が シー ン に 追加 され 、 描画 され ます 。 








mmlNl 画 立方 体 を 生成 する に は 「new THREE.CubeGeometry()」 と する 


Threejs で 立方 体 を 生成 する に は 、|new THREE.CubeGeometry () 」 と し ます 。 パ 


ラメ ー タ に は 順番 に 、 横 の サイ ズ 、 縦 の サイ ズ 、 高き を 指 定 し ます 。 立方 体 の 分 割 数 ( セ 
グ メ ント / 細 か さ ) は 、 4 一 6 番目 の パラ メー タ で 指定 し ます 。 これ は 順番 に 、 横 の 分 割 数 、 
縦 の 分 割 数 、 高 さ の 分 割 数 に な り ま す 。 
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関連 項目 ょ ゅ 


@e 球体 を 生成 する 上 … の りー p.546 
3 トー ラス を 生成 する 時 D.549 
@ トー ラス 結び 目 を 生成 する ーー ト ーー に ドド ドド ドド ドド ドド ーー p.55 1 
@e 平面 を 生成 する ポン eee D.553 
@e 円 筒 を 生成 する ーー ョ ドド ーーー に レー ニコニ ce コ ーー ン ェ ョ ョ ニ コピ ーー D.55 ら 5 
@ 上 二 十 面 体 を 生成 する 上 … で の …… ド ドド に ドド ドド ドド ドド ドド ドド D.557 
e 回 転 体 を 生成 する ーー に iiimooemeeneeeneeneenenenernerrmir D.560 
@ 線 を 生成 する 1 まな の やせ の かい か し に いり いけ いき 3 D.563 
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球体 を 生成 する 


ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Threejs ラ イブ ラリ を 使っ て 球体 を 生成 する 
方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<metg charset="utf-8"> 
<tittle>SqmpLe</tttle> 
<SCPtDt src="]S/Three .]S "></scrtDt> 
<SCrtDpt src="]s/sample.]S "></SCrtDt> 
</hegd> 
<body></body> 
</html> 


JavaScript の コー ド (sample.s) 
wtndow. agddEventLtstener("toad" functton(){ 
// Three.js を 初期 化 「 
var renderer = new THREE.WebGLRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピクセル 
renderer. setStze(329, 329): 
// Three.js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
document . body .qppendChtld(Crenderer.domELement): 
// カメ ラ を 初期 化 
var camera = new THREE .PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 
Caqmerq.DOS1tton . set(59, 49, 39): 
camera.tookAtC fx: の 9, y:9, z: の 1 ): 
// オプ ジェ クト を 初期 化す る 
var sphere = new THREE .MeshC 
// 球体 の XYZ サ イズ を 設定 
new THREE . SphereGeometry(29, 39, 39), 
// マテ リア ル を Lgmbert に 
new THREE .MeshLambertMgtertal({color: 9xffff99}) 
2: 
// シー ン を 初期 化す る 
var scene = new THREE .Scene(): 
// 球体 を 3D シ ー ン に 追加 
scene .qdd(sphere): 
// カメ ラ を 3D シ ー ン に 追加 


scene . aqdd(C cagmera): 


生 王 ロ 丁 | 口 N -2 コ 5 m 球体 を 生成 する 


// 光源 を 追加 


var Ltght = new THREE.DtrectionalLtght(9xffffff 1.0): 


// 光源 の 位置 を 設定 


Z69, 199): 


ltght.posttton . set(-59 


scene . qdd( L1ght): 


// レン ダリ ング 


CamerQ): 


renderer.render(scene, 


+。 false): 


\ 


示 


加 さ れ て 表 : 


師 


に コ 
ニー 


( 


が 


さ 


ブラ ウザ で index.html を 表示 する と 、 球体 が 
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7 トト 


ント ) を 指定 する こと も で きま す 。 ワイ ヤー フレ ー ム で 3 


球体 の 分 割 数 (セグ メ 
らい 細か く 分 割 さ きれ て いる か 確認 で きま す 。 
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= ヨ ョ sl 邊 球体 を 生成 する に は 「new THREE.SphereGeometry()」 と する 


Threejs で 球体 を 生成 する に は 、「new THREE.SphereGeometry () 」 と し ます 。 最 
初 の パラ メー タ が 球体 の 半径 、 2 番目 が 横 の 分 割 数 (セグ メン ト / 細 か さ ) 、 3 番目 が 縦 の 
分 割 数 に な り ま す 。 いずれ の パラ メー タ も 省略 可能 で す 。 


[ 口 











可 また 、 完全 な 球体 で は な く 、 半球 な どの 形状 し た い 場 合 に は 、 4 番目 の パラ メー タ に X 
ニ 方 向 の 開始 角度 、 5 番目 の パラ メー タ に X 方 向 の 終了 角度 を 指定 し ます 。 6 番目 の パラ 
| メー タ に Z 方 向 の 開始 角度 、 7 番目 の パラ メー タ に Z 方 向 の 終了 角度 を 指定 し ます (角度 
| は ラジ アン 単位 で 指定 する ) 。 
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トー ラス を 生成 する 


ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Threejs ラ イブ ラリ を 使っ て トー ラス (ドー ナツ 
型 ) を 生成 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metaq charset="utf-8"> 
<tttle>SqmpLe</t1tt て le> 
<sCcrtpt src="]S/Three.]S "></SCr1Dt> 
<SCrtpt src="]S/sample.]S"></SCr1Dt> 
</head> 
<body></body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .qaddEventLtstener("1Load" 、 functton(){1 
// Three.js を 初期 化 
var renderer = new THREE .WebGLRenderer( ) 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピク セル 
renderer.SetStze(329, 3Z0): 
// Three .js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
document .body .qppendChttdCrenderer .domEtement): 
// カメ ラ を 初期 化 
var camera = new THREE .PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 
camera.POoSsttton. set(49, 19, 39): 
camera.tookAt( fx: の 9。y: の 9, z: の 9 } ): 
// オプ ジェ クト を 初期 化す る 
var torus = new THREE .Mesh( 
// トー ラス の サイ ズ を 設定 
new THREE . TorusGeometry(12, 3, 19, 49), 
// マテ リア ル を Laqmbert に 
new THREE .MeshLambertMatertal(tcolor: 9x90ffT90}) 
う : 
// シー ン を 初期 化す る 
var Scene = new THREE.Scene(): 
// トー ラス を 3p シ ー ン に 追加 
Scene . qdd(toruS): 
// カメ ラ を 3D シ ー ン に 追加 


Scene .qdd( camera): 
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// 光源 を 追加 の 
var Ltght = new THREE.DtrectionglLightC の xffffff,。 1.3): 

// 光源 の 位置 を 設定 

ltght . posttton . Set(-59, 269, 199): 

scene .qdd(l1ght): 

// レン ダリ ング 

renderer.render(scene, camera): 


}。 faqlse): 


ブラ ウザ で index.html を 表示 する と 、 トーラス (ドー ナツ 型 ) が シー ン に 追加 され て 表示 され 
ます 。 








mm 中 トー ラス を 生成 する に は 「new THREE.TorusGeometry() 」 と する 


ThreejJs で トー ラス (ドー ナツ 型 ) を 生成 する に は 、「new THREE.TorusGeometry() 」 
と し ます 。 最初 の パラ メー タ が トー ラス の 半径 、 2 番目 が 管 の 太 き に な り ま す 。 3 番目 と 4 番目 
が 分 割 数 (セグ メン ト / 細 か さ ) に な り ま す 。 いずれ の パラ メー タ も 省略 可能 で す 。 

また 、 完全 な トー ラス で は な く 、 半 円 な どの 形状 し た い 場 合 に は 、 5 番目 の パラ メー タ に 開 
始 角度 、 6 番目 の パラ メー タ に 終了 角度 を 指定 し ます (角度 は ラジ アン 単位 で 指定 する )。 
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簡便 誠に は 2 や tvftf4SCKUtde12AKVPSZ を NCPv21 く CRSRYSSY23r ak D.557 
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トー ラス 結び 目 を 生成 する 








ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Threejs ラ イブ ラリ を 使っ て トー ラス 結び 目 を 
生成 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE htmLl> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>SamplLe</t1tle> 
<SCrtpt src="]Ss/Three .]S "></SCr1Dt> 
<SCrtpt src="]S/sample .]S "></SCP1Dt> 
</head> 
<body></body> 
</html> 


JavaScript の コー ド (sample.js) 


window .qddEventListener("1oad" 。 functton()+1 
// Three.js を 初期 化 
var renderer = new THREE .WebGLRenderer(): 
// 描画 領域 の サイ ズ は 維 横 と も 329 ピ クセ ル 
renderer.SetStze(329, 329): 
// Three.js に よっ て 生成 され た Canvgs を ペー ジ の 未 尾 に 追加 
document.body . qppendCht1dCrenderer .domE Lement): 
// カメ ラ を 初期 化 
var camera = new THREE.PerspecttveCamera(49, 1.9, 1, 19990): 
// カメ ラ 位 置 を 設定 
camerq.DOoSttton. set(49, 19, 39): 
camera.LookAt( fx: の,。y: の 9, z: の 9} ): 
// オプ ジェ クト を 初期 化す る 
var torusknot = new THREE .Mesh( 
// トー ラス 結び 目 の 形 状 を 設定 
new THREE . TorusKnotGeometry(19, 1, 19, 49, 2, 5), 
// マテ リア ル を Lambert に 
new THREE .MeshLaqmbertMatertal({tcotor: の x99ff90} ) 
う : 
// シー ン を 初期 化す る 
var Scene = new THREE .Scene(): 
// トー ラス 結び 目 を 3D0 シ ー ン に 追加 
Scene . add(torusknot): 
// カメ ラ を 3D シ ー ン に 追加 


scene . qdd(cameroa): 
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// 光源 を 追加 人 
var ltght = new THREE.DitrecttonalLight(9xffffff。 1.3): 
// 光源 の 位置 を 設定 
Ltght.posttton.set(-59, 269。 199): 
scene .qdd( Ltght): 
// レン ダリ ング 
renderer.render(scene, camera): 
},。 false): 


プラ ウザ で index.html を 表示 する と 、 星 形 の トー ラス 結び 目 が シー ン に 追加 され て 表示 され 
ます 。 








トー ラス 結び 目 を 生成 する に は 
Ha [neWw THREE.TorusKnotGeometry( )」 と する 


ThreejJs で トー ラス 結び 目 を 生成 する に は 、「new THREE.TorusKnotGeometry() 」 
と し ます 。 最初 の パラ メー タ が 半径 、 2 番目 が 管 の 太 S さ に な り ま す 。 3 番目 と 4 番目 が 分 割 数 
(セグ メン ト / 細 か さ ) に な り ま す 。 いずれ の パラ メー タ も 省略 可能 で す 。 

5 番目 と 6 番目 の パラ メー タ が 形状 を 決め ます 。 Three.js で は 、(p , q) 型 の トー ラス 結び 
目 に な り ま す 。 
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平面 を 生成 する 


ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Threejs ラ イブ ラリ を 使っ て 平面 を 生成 する 
方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sample</t1tle> 


<Scrtpt src="]s/Three.]S "></SCr1Dt> 








<Scrtpt src="]Ss/sample .]S "></SCrtDt> 
</head> 
<body></body> 
</html> 


JavaScript の コー ド (sample.js) 
witndow.qddEventLtstener("toad"。 functton(){ 
// Three .js を 初期 化 
var renderer = new THREE .WebGLRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピク セル 
renderer.setSize(329, 329): 
// Three .js に よっ て 生成 され た Canvas を ペー ジ の 未 尾 に 追加 
document .body .qppendChttdCrenderer .domELement): 
// カメ ラ を 初期 化 
var camera = new THREE .PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 
camera.POSttton . set(49, 19, 3 の ): 
caqmera.tookAt( {tx:9,y:9, z:9 } ): 
// オプ ジェ クト を 初期 化す る 
var plgne = new THREE .Mesh( 
// 平面 の サイ ズ を 設定 
new THREE .PlaneGeometry(39, 29), 
// マテ リア ル を Lambert に 
new THREE .MeshLambertMotertalCtcolor: 9xff9990} ) 
8 5 1 
// シー ン を 初期 化す 
var scene = new THREE.Scene(): 
// 平面 を 3D シ ー ン に 追加 
scene .add(plane): 
// カメ ラ を 3p シ ー ン に 追加 
scene .qddCcamero): 
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/ 光源 を 追加 / 
var ltght = new THREE.DtrecttonatLightC9xffffff, 9.85): 

// 光源 の 位置 を 設定 

IL1ght.posttton.set(-59, 269, 199): 

scene . qdd( 1ght): 

// レン ダリ ング 

renderer.render(scene, Caqmera): 


}, foqlse): 


プラ ウザ で index.html を 表示 する と 、 赤い 平面 が シー ン に 追加 され て 表示 され ます 。 





mml に Nm 正 平面 を 生成 する に は 「new THREE.PlaneGeometry()」 と する 


Threejs で 平面 を 生成 する に は 、「new THREE.PlaneGeometry () 」 と し ます 。 最 
切 の パラ メー タ が 平面 の 横幅 、 2 番目 が 平面 の 縦 幅 に な り ま す 。 3 番目 と 4 番目 は 平面 の 
分 割 数 (セグ メン ト / 細 か さ ) に な り ま す 。 3 番目 と 4 番目 の パラ メー タ は 省略 可能 で す 。 


関連 項目 ょ ゅ 
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LChrome 』 Safari 5 | Firefox 4 


=1 ゴ mglmlN ン fc 
円 筒 を 生成 する 


ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Threejs ラ イブ ラリ を 使っ て 円 筒 を 生成 する 
方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<ttt1le>Sqmple</t1tle> 
<scrtpt src="]s/Three.]S "></SCr1Dt> 
<SCrtDpt src="]S/Sample .]S "></SCrtDt> 

</head> 

<body></body> 

</html> 


JavaScript の コー ド (sample.jS) 


window.addEventLtstener("1oqd" , functton(){ 
// Three . js を 初期 化 
var renderer = new THREE .WebGLRenderer(taqnttaltqs: true}+): 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピク セル 
renderer.SsetStze(329, 329): 
// Three.js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
documert.body .qppendChttd(Crenderer.domELement): 
// カメ ラ を 初期 化 
var camera = new THREE.PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 
camera.POoS1tton . Set(49, 25, 39): 
camera.LookAt( {tx:9, yi の, z: の } ): 
// オプ ジェ クト を 初期 化す る 
var cyLtnder = new THREE .Mesh( 
// 円 筒 の サイ ズ を 設定 
new THREE .CyLtnderGeometry(8, 8, 15, 49, 49), 
// マテ リア ル を Laqmbert に 
new THREE .MeshLambertMatertgal(fcolor: の 9x99ff90} ) 
う : 
// シー ン を 初期 化す る 
var scene = new THREE.Scene(): 
// 円 筒 を 3D り シー ン に 追加 
scene . add(cyltnder): 
// カメ ラ を 3pD シ ー ン に 追加 


Scene . aqdd(camero): 
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/ 光源 を 追加 ふる 
var Itght = new THREE.DitrectionalLightC9xffffff, 1.85): 
// 光源 の 位置 を 設定 
Ltght.posttton. set(-59, 269, 199): 
scene . qadd( L1ght): 
// レン ダリ ング 
renderer.render(scene , caqmera): 
}, false): 


プラ ウザ で index.html を 表示 する と 、 緑色 の 円 筒 が シー ン に 追加 され て 表示 され ます 。 





miaamlii 自 円 筒 を 生成 する に は 「new THREE.CylinderGeometry()」 と する 


Threejs で 円 筒 を 生成 する に は 、「new THREE.CylinderGeometry () 」 と し ます 。 
取 人 の パラ メー タ が 円 筒 の 上 の 半径 、 2 番目 が 円 筒 ひ の 下 の 半径 に な り ま す 。 3 番目 は 円 
の 高 さ に な り ま す 。 また 、4 番 目 と 5 番目 は 平面 の 分 割 数 (セグ メン ト / 細 か さ ) に な り ま す 。 
また 、 すべ て の パラ メー タ は 、 省略 可能 で す 。 
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@ 平面 を 生成 する 上 上" 補 と 写 ロ ドド D.553 
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RI 回 転 体 を 生成 する 4 人 軍人 上 人 あす p.560 
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正二 十 面体 を 生成 する 


ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Three.js ラ イブ ラリ を 使っ て 正二 十 面 体 を 生 
成す る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meto charset="utf-8"> 
<tttle>SqmpLe</ttt1le> 
<SCrtpt src="]S/Three.]S"></SCr1Dt> 
<scrtpt src="]S/sample.]S"></SCPtDt> 

</head> 

<body></body> 

</html> 


JavaScript の コー ド (sample.jS) 


wtndow.addEventLtstener( "toad" 。 functton(){ 
// Three.js を 初期 化 
var renderer = new THREE.WebGLRenderer(tanttaltas: true}): 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピクセル 
renderer.SsetStze(329, 329): 
// Three.js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
document . body . appendChttdCrenderer .domE Lement): 
// カメ ラ を 初期 化 
var camera = new THREE.PerspectiveCamera(49, 1.9, 1, 19909): 
// カメ ラ 位 置 を 設定 
camera.DOSttton . Set(39,。 25, 19): 
camera.LookAt( fx: の 9,。y:9, z: の 9} ): 
// オブ ジェ クト を 初期 化す る 
var tcosahedron = new THREE .Mesh( 
// 正二 十 面体 の サイ ズ を 設定 
new THREE . TcosqhedronGeometry(10) , 
// マテ リア ル を Lambert に 
new THREE .MeshLambertMagtertat({cotor: 9x9 の ff の 9} ) 
う : 
// シー ン を 初期 化す る 
var scene = new THREE .Scene(): 
// 正二 十 面 体 を 3D シ ー ン に 追加 
scene . add(itcosahedron): 
// カメ ラ を 3D シ ー ン に 追加 


Scene . add( caqmera) : 
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// 光源 を 追加 人 
var Itght = new THREE.DtrecttonglLightC の xffffff。 1.0): 

// 光源 の 位置 を 設定 

Ltght.posttton. set(-59, 269, 199): 

scene .qdd( Ltght): 

// レン ダリ ング 

renderer.render(scene, caqmera): 


}, faqlse): 


ブラ ウザ で index.html を 表示 する と 、 緑色 の 正二 十 面 体 が シー ン に 追加 され て 表示 され ます 。 





ワイ ヤー フレ ー ム で 表示 する と 、 正二 十 面 体 だ だ わかり ま す 。 





生 ビ ロ 丁 | 口 NN - ラ オロ m 正二 十 面 体 を 生成 する 


正二 十 面体 を 生成 する に は 
yi2209 隊 識 「nGW THREE.IcosahedronGeometry()」 と する 


Threejs で 正二 十 面体 生成 する に は 、「new THREE.IcosahedronGeometry ) 」 
と し ます 。 パラ メー タ に は 、 正二 十 面 体 の サイ ズ を 指定 し ます 。 正二 十 面体 の 色 な ど は 、 
マテ リア ル で 指定 する こと が で きま す 。 な お 、 結果 を わか りや すく する た め 、| wireframe」 
オプ ショ ン を 指定 し て ワイ ヤー フレ ー ム で 表示 する サン プル も 用 意 し て あり ます 。 







缶 放 下 引 三 四 必 2 


『 立方 体 を 生成 する 仙人 は の 6 な MI 40 が D.544 
P】 球体 を 生成 する は は 人 和 Dp.546 
「) トー ラス を 生成 する けい Er りり が て も で い で イッ サン 0 pD.549 
@ トー ラス 結び 目 を 生成 する 0 まま 徐々 な まる る 8 NN 当 の 和 人 p.55 1 

e 平面 を 生成 する ii Dp.553 
円 筒 を 生成 する 義和 作り な YE バキ せい リト で イサ D.555 
3 回 転 体 を 生成 する MA 法寺 和夫 2 D.560 
を 線 を 生成 する れい 87 だ 本 宇和 せ ド ドジ で すそ で 1 くり すい や と トド タレ れい いい D.56 3 
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回 転 体 を 生成 する 


こ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Threejs ラ イブ ラリ を 使っ て 回 転 体 を 生成 す 
5 * て 解説 し ます 。 


HTML の コー ド (indexhtmD 
<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttle>Samp Le</t1t1e> 
<SCrtDpt src="]Ss/Three .]S "></scrtpt> 








<Scrtpt src="]s/sample.]S"></scrtpt> 
</hegd> 


<body></body> 
</html> 


JavaSoript の コー ド (sample」s) 


wtndow.aqddEventLtstener("1oaqd" function(){ 
// Three.js を 初期 化 
var renderer = new THREE .WebGLRenderer({anttgtiaqs: true}): 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピク セル 
renderer.SetStze(329, 329): 
// Three.js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
document . body . gppendCht1dCrenderer .domEtement): 
// カメ ラ を 初期 化 
Var cgmera = new THREE.PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 
camerq.DOSttton . set(39,。 35, 79): 
camera.1ookAt( fx:19,y:19, z:29 } ): 
// ボイン ト を 設定 
var potnts =[ ]: 
potnts[9] = new THREE.Vector3(9, 9, 9): 
potnts[1] = new THREE .Vector3(1, 9, 9): 
potnts[2] = new THREE.Vector3(29, 9, 9): 
potnts[3] = new THREE.Vector3(2, 9, 109): 
potnts[4] = new THREE.Vector3(2, 9, 35): 
// オブ ジェ クト を 初期 化す る 
Var 1athe = new THREE .MeshC 
// 回 転 体 の サイ ズ を 設定 
new THREE .LatheGeometry(Cpotnts, 6, Maqth.P1), 
// マテ リア ル を Lqambert に 
new THREE .MeshLambertMatertal(fcolor: 9x99ff99, wtreframe: fatse}) 
う : 


生 呈 己 ロ ロ TI 口 N - ラ イ ] mW 回 転 体 を 生成 する 


// シー ン を 初期 化す る 4 
var scene = new THREE .Scene(): 
// 回 転 体 を 3D り シー ン に 追加 
scene .qdd( lathe): 
// カメ ラ を 3p シ ー ン に 追加 
Scene . add(camero): 
// 光源 を 追加 
var light = new THREE.DtrecttongtLight(9xffffff。 1.0): 
// 光源 の 位置 を 設定 
light.posttton. set(-59, 269, 199): 
scene . odd( 11ght): 
// レン ダリ ング 
renderer.render(scene, Camerq): 
}, fatse): 


ブラ ウザ で index.html を 表示 する と 、 緑色 の 回 転 体 ( 漏 填 を 半分 に 切断 し た 形状 ) が シー 
ン に 追加 され て 表示 され ます 。 


mmlNlm 画 回 転 体 を 生成 する に は 「new THREE.LatheGeometry()」 と する 


Threejs で 回 転 体 を 生成 する に は 、|new THREE.LatheGeometry ()) 」 と し ます 。 
最初 の パラ メー タ に は 、 回 転 体 の 元 と な る 座標 値 を 格納 し た 配列 を 指定 し ます 。 座標 値 
は 、「new THREE.Vector3( 」 と し て 生成 し 配列 に 格納 し て いき ます 。 

回 転 体 生成 する [THREE.LatheGeometry () 」 の 2 番目 の パラ メー タ に は 、 分 
禄 数 (セグ メン ト / 細 か さ ) を 指定 し ます 。 3 番目 の パラ メー タ は 、 どの くら い 回 転 さ せる 
か を ラジ アン 単位 で 指定 し ます 。「Math.PI*2」] と すれ ば 360 度 回 転 し た 物体 が 作成 
され 、「Math.PI] で あれ ば 180 度 だ け 回 転 き させ た 物 体 が 生成 され ます 。| THREE. 
LatheGeometry() 」 の 2 番目 以降 の パラ メー タ は 、 省略 する こと が で きま す 。 
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関連 項目 ょ ゅ 


P】 Y 方 体 を 生成 する 0 かがり が な る も:e も せる まあ 混入 な る 語 せる る ミラ 洲 0 人 A が ey る を な 4 は > D.5 44 
『 球体 を 生成 する 計れ を が の.406※ せ 所 深雪 まお 32 ES ET p.546 
@ トー ラス を 生成 する 人生:0 あ し な 信 : 人 人 守れ: 浴 計る 入り D.549 
を トー ラス 結び 目 を 生成 する で が 0 で 光生 な アト イド が か の 2 ササ 2 お 23MIERRT 和 に 2210 D.55 ] 

@ 平 面 を 生成 する で ① い 上 ri…… ド 信人 に に D.553 
全 円 筒 を 生成 する 人 和泊 Ai が 交信 D.555 
る 正二 十 面 体 を 生成 する れれ エセ メイ イイ で アザ うり PR2 お 生む TDN D.557 
全 線 を 生成 する お の 9 人 生生: D.563 
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線 を 生成 する 


ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Three.js ラ イブ ラリ を 使っ て 線 を 生成 する 方 
法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<ttt1le>SqmplLe</t1tLe> 
<Scrtpt src="]S/Three .]S"></sCP1Dt> 
<SCrtDt src="]S/sample .]S"></SCrtDt> 
</head> 
<body></body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow.addEventLitstener("1ood" 。 functton(){ 

// Three .js を 初期 化 
var renderer = new THREE .WebGLRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピク セル 
renderer.SetStze(329, 32Z0)・ 
// 背景 色 と 不透明 度 を 設定 
renderer.setCtearColorHex( の 9x99ff99, 9.5): 
// Three .js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
document . body .qppendChtld(renderer .domE Lement): 
// カメ ラ を 初期 化 
var camera = new THREE.PerspecttveCamera(49, 1.9, 1, 199): 
// カメ ラ 位 置 を 設定 
camerq.DOSttton.set(59, 49, 39): 
camera.tookAt( fx: の 9, y: の , z: の 9 ): 
// 線 の 座標 を 格納 する オプ ジェ クト を 生成 
var ltneGeo = new THREE.Geometry(): 
ltneGeo.verttces .push( 

// 三角 形 を 構成 する 座標 点 を 設定 

new THREE .Vector3(-29, 19, 9), 

new THREE .Vector3(19, 9, 9 の ), 

new THREE .Vector3( の 9, 29, 19), 

new THREE .Vector3(-29, 19, 9) 
う : 
// 線 を 生成 。 線 の 色 や サイ ズ は マテ リア ル で 設定 
var line = new THREE .Ltne(LineGeo, 

new THREE .LtneBasitcMaqtertal({ 





GO 八 ご /]5 SBAUB)/SB 人 AU ビバ ) だ に き 軒 ky4 ミ a 


563 


m 王 ピロ T| 口 N!- ラ イジ m 線 を 生成 する 


Color: の x999 の ff , | 
ttnewidth: 8, " て お 
Opacity : 9.6 
}) 
2: 
// シー ン を 初期 化す る 
Vor Scene = new THREE.Scene(): 
// 立方 体 を 3D シ ー ン に 追加 ] ( 本 っ て な すら も 2! この 
scene .qdd(ttne): 1 「 
// カメ ラ を 追加 
Scene . qdd(caqmera): 
// レン ダリ ング & る アニ メー ショ ン 
functton render(){ 
// 線 を Y 軸 回 転 
ltne .rotatton.y = Ltne.rotatton.y + 9.1: 
requestAntmationFrameCrender): 
renderer.render(scene, cqmero): 
5 + 
render(): 
Q }, fatse): 「 >)1 っ まさ 


ブラ ウザ で index.html を 表示 する と 、 線 で 構成 され た 三角 形 が Y 軸 回 転 す る アニ メー ショ 
ン が 表示 され ます 。 
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m 己 E ビ ロ TI ロ N-2 オ 2 mw 線 を 生成 する 


mmlNl 画 線 を 生成 する に は 「new THREE.Geometry()」 と する 


Threejs で 線 を 生成 する に は 、「new THREEGeometry ( 」 と し て 線 を 構成 する 座標 点 
を 用 意 し ます 。 用 意 し た 座標 点 を [THREELine() 」 の 最初 の パラ メー タ に 指定 し ます 。 2 
番目 の パラ メー タ は 、 マテ リア ル の 指定 に な り ま す 。 線 の マテ リア ル は 、| THREE.LineBasic 
Material() 」 を 使っ て 指定 し ます 。 線 の 色 は 「color」 プ ロ パ ティ 、 線 の 太 き は 「 linewidth」 プ 
ロ パ ティ で 指定 し ます 。 

な お 、 Windows 7 上 で は 、 Google Chrome 21、Firefox 14 と も 、| linewidth」 プ ロ 
パテ ィ の 値 は 反映 され ず 線 幅 は | 1] に な り ま す 。 











関連 項目 ょ ゅ 


PF 立方 体 を 生成 する 20 る 人 きる の が 0 記 各 人 当 和 和 (6: め 短信 人 ま 4 p.544 
全 球体 を 生成 する ee 64 % ゃ 2 の る 8 まる fe は 6 の e で まる 下がれ ROW は 4 0vW We:0 古 6 D.546 
@ トー ラス を 生成 する 生生 注 た な の.3 6 0 信和 p.549 
『) トー ラス 結び 目 を 生成 する な (人 条 S ある 5 4 涼 を 六 深 0): 了 が 和泊 p.55 1 
の 平面 を 生成 する 0 を @ 泊 お 泊 i 志 浅学: あれ 全 9 びわ 注い を を D.553 
き 円 筒 を 生成 する 0 な 和泊: な ませ 人 定め まる 0D.555 
@ 止 _ 十 面 体 を 生成 する 6 が kkkw6YJHAWS > < 人 bh8 で で も ま p.557 
飼 回 転 体 を 生成 する AWT や てい いれ 2 いそ バイ キイ て (よく ーー p.560 
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LChrome 1 Safari 5 | Firefox 4 


BE ビリ じ 11 品 NN-2 人 オヨ 


テク スチ ャ マッ ピン グ を 行う 








ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Three.jS ラ イブ ラリ を 使っ て テク スチ ャ マッ ピン 
グ を 行う (画像 を 貼り 付け る ) 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<titte>Sampte</tit1e> 
<Scrtpt src="]s/Three .]s "></scrtpt> 
<Scrtpt src="]s/sqmple.]s"></scrtpt> 
</head> 


<body></body> 
</html> 


JavaScript の コー ド (sample.js) 
wtndow. addEventLtstener("1ogd" function(){ 
// Three.js を 初期 化 
var renderer = new THREE.WebGLRenderer(): 
// var renderer = new THREE .CanvagsRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 326 ピ クセ ル 
renderer.SetSize(329, 329): 
// 背景 色 と 不 透明 度 を 設定 
renderer.setClLearColorHex( の 9x99ff99, 9.5): 
// Three .js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
document .body . appendChttdCrenderer .domELement): 
// カメ ラ を 初期 化 
var cgmerg = new THREE.PerspecttveCamera(49, 1.9, 1, 199): 
// カメ ラ 位 置 を 設定 
camera.PoSsttton.set(59, 49, 39): 
camera.lookAt( fx: の 9。y:9, z: の } ): 
// テク スチ ャ マッ ピン グ の 画像 を 読み 込む 
Var texture = new THREE.TmageUttts .1oqdTexture( "1mages/cr.]pg"): 
// オプ ジェ クト を 初期 化す る 
var cube = new THREE.MeshC 
// 立方 体 の XYZ/ サ イズ を 設定 
new THREE .CubeGeometry(25, 25, 25), 
// マテ リア ル を テク スチ ャ に 
new THREE .MeshBastcMatertg1l({ 
ImQD: texture , 
overdraqw: true // THREE.CgnvasRenderer の 場合 に 必要 
}) 





ビビ ロ TI 口 N - 有 2 クオ 4 コ ョ m ョ テク スチ ャ マッ ピン グ を 行う 


): か 
// シー ン を 初期 化す る 
var Scene = new THREE.Scene(): 
// 立方 体 を 3D シ ー ン に 追加 
scene . Qdd(cube): 
Scene .qdd(Ccqmera): 
// レン ダリ ング 。 時 間 差 で 2 回 呼び 出さ な いと テク スチ ャ は 表示 され な い 
functton render(){ 
requestAntmattonFraqme(render): 
renderer.render(scene , Caqmera): 
} 
render(): 
}, false): 


画像 が ロー カル ディ スク 上 に ある と 、 画像 が 読み 込ま れず 、 真っ 黒 に な る 場合 が あり ます 。 その 場 
合 は 、 ネッ トワ ー ク 環境 (WeDb サ ー バ ー 上 ) で 確認 し て くだ さい 。 


oooaoooooooooeoooooeooG の の の の の の の ぐ ③ の の の の ゆ の の のぶ わる の の や で から の の の やら る の る ④ ら の な の の の ④④ の の の の の の の の の の の る の の で の で の る の る の ④ の の の や の の の の ④④ る で の ゆず さる ひ の の の の さぶ の る の や の の の の の の ちる の る の の の の で の や の も の の の で の や の やや oO で の の で 


プラ ウザ で index.html を 表示 する と 、 立方体 に 画像 が 貼り 付い た 状態 で 描画 され ます 。 
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還 ビビ ピロ TI ロ N-243 mw テク スチ ャ マッ ピン グ を 行う 


画像 を 貼り 付け る に は 
回 上 時 「new THREE.ImageUtils.IoadTexture()」 を 使う 


Threejs で 立方 体 や 球体 な どの オブ ジェ クト (3D モ デル ) に 画像 を 貼り 付け る (テク ス 
チャ マッ ピン グ を 行う ) に は 、「new THREE.ImageUtils」oadTexture () | を 使い ます 。 
パラ メー タ に 、 貼り 付け る 画像 の URL を 指定 し ます 。 画像 が ロー カル ディ スク 上 に ある と 、 
画像 が 読み 込ま れず 、 オブ ジェ クト が 真っ 黒 に な る 場合 が あり ます 。 

謗 み 込ま れ た 画像 を 貼り 付け る に は 、「new THREE.Mesh () 」 の 2 番目 の パラ メー 
タ に 、 テク スチ ャ を 割り 当て た マテ リア ル ( 質 感 ) を 「new THREE.MeshBasicMaterial 
)」 を 使っ て 指定 し ます 。「new THREE.MeshBasicMaterial() | の パラ メー タ で 指 
定 す る 「map」 オ プシ ョ ン に 「new THREEImageUtilsoadTexture() 」 に よっ て 生成 
し た (読み 込ん だ 画像 ) オ ブ ジ ェクト を 指定 し ます 。 

レン ダラ ー が | THREE.CanvasRenderer」 の 場合 は 、 これ で テク スチ ャ が 表示 され 
ます 。| THREE.WebGLRenderer()」 の 場合 は 、[requestAnimationFrame() | を 
使っ て 2 回 以上 、 描画 する 必要 が あり ます (Threejs r49) 。 
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『 


し 





=1 コ mgglmlN ロ ンジ! 
周り の 景色 を 反射 させ て 表示 する 


ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Three.js ラ イブ ラリ を 使っ て 周り の 景色 を 反射 | 
させ 表示 する (環境 マッ プ を 設定 する ) 方 法 に つい て 解説 し ます 。 R 


= が 中 = 畑 mme 半 HTML の コー ド (index.html) 還 
唱 
| 


<!DOCTYPE html> 








<html> 語 
<head> E 
<metg charset="utf-8"> 軸 0 
<title>SampLe</title> 剛 
<sCrtpt src="]S/Three . ]S "></SCrtDpt> L ュ 
<scrtpt src="]s/sample .]S "></scrtpt> | 
head> 還 較 
<body></body> に 
</html> 
JavaScript の コー ド (sample.jS) 抽 
wtndow .qddEventLtstener("1ogd"。 functton()+ ロ 


// Three.js を 初期 化 
var renderer = new THREE .WebGLRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピク セル 
renderer.setStze(329, 329): 
// 背景 色 と 不 透明 度 を 設定 
renderer.setCtearColorHex( の x90ff99, 9.5): 
// Three . js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
document.body .qppendChitdCrenderer.domELement): 
// カメ ラ を 初期 化 
var camera = new THREE.PerspectiveCamera(49, 1.9, 1, 199): 
// カメ ラ 位 置 を 設定 
camera.poSttton. set(59、 4 の 9, 39): 
camera.1ookAtC fx:0,y:9, z:9 1 ): 
// テク スチ ャ (環境 ) マ ッ ピ ング の 画像 を 読み 込む 
var urlList=[ 
"1mages/cr .]pg", "1mages/cr.]P9", 
"1mages/cr.]pg', "1mages/Cr.]P9", 
"1mages/cr.]pg", "1mages/cr.]pg" 
」: 
var texture = new THREE.TImageUttts.1oqdTextureCubeCurlLtst): 
// オプ ジェ クト を 初期 化す る 
var cube = new THREE .Mesh( 
// 立方 体 の XY サイ ズ を 設定 
new THREE .CubeGeometry(19, 39, 39)), 
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司 王 ビビ ピ T| 口 N- ラ イイ mW 周り の 景色 を 反射 させ て 表示 する 


// 環境 マッ プ を マテ リア ル に 設定 を 人 
new THREE .MeshBastcMatertal({ 
color: の xffffO90, 
envMap: texture 
}) 
う : 
// シー ン を 初期 化す る 
var Scene = new THREE .Scene(): 
// 立方 体 を 3D シ ー ン に 追加 
Scene . qdd(cube ): 
// カメ ラ を シー ン に 追加 
scene . qdd(cqmera): 
// 揺 動 さ せる た め の 角 度 を 入れ る 変数 
var degree = 0 の: 
// レン ダリ ング 
functton render(){ 
// 立方 体 を 回 転 
degree = degree + 1: 
Cube . rotatton.x = degree * Math.PI / 189: 
Cube . rotatton.y = degree * Math.PI / 189: 
requestAntmattonFrame(render): 
renderer.render(scene, camero): 
} 
render( ): 
+, fgqtse): 





画像 が ロー カル ディ スク 上 に ある と 、 画像 が 読み 込ま れず 、 真っ 黒 に な る 場合 が あり ます 。 その 場 
合 は 、 ネッ トワ ー ク 環境 (Web サ ー バ ー 上 ) で 確認 し て くだ さい 、。 


の で や の の の ひ す の の の の な る の の の で の の る の ぐ の の の の る の も ゃ の の の の の ② ひ の の の の の の の の の の の の の ひ の ふ の ② の の の の の の の の の も る の の の ④ の の の の の の ⑥ や の らら の の の の の の や の や の の の ④ の の の の の の の の ⑤ の の @ る のみ の の の の ooeoeeeoeooeeeeeeeeeeeeee. 


ブラ ウザ で index.html を 表示 し 、 立方 体 が 回 転 す る と 、 設 
反射 し た よう に 表示 され ます 。 
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m 王 ビ ピロ TI ロト N-2 4 4 m 周り の 景色 を 反射 させ て 表示 する 


環境 マッ プ を 設定 する に は 
mM 「THREE.ImageUtils.ljoadTextureCube()」 を 使う 


Threejs で 物体 に 周り の 景色 を 反射 さす せる に は 、 マテ リア ル の 設定 で | envMap」 プ 
ロ パ ティ に 反射 表示 させ る テク スチ ャ を 設定 し ます 。 この テク スチ ャ は 、| THREE.Image 
Utills」oadTextureCube () 」 を 使っ て 指定 され た も の に な り ま す 。| THREE.ImageUtls. 
loadTextureCube() 」 で 設定 する 反射 マッ プ 画像 は 、 立方 体 の 6 面 に 対応 し た も の を 指 
定 し ます 。 








関連 項目 pp 
1 テク スチ ャ マッ ピン グ を 行う いた ドサ ( が お の て 0> ま ま が チ リ ド プ テト いい これ 1 キト Dp.566 
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=1 コ malmIN 有 > と 
立方 体 な どの 物体 を 回 転 さ せる 


ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Three.js ラ イブ ラリ を 使っ て 立方 体 な どの 物 
体 を 回 転 さ せる 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 

<html> 
<metq charset="utf-8"> 
<tttle>Sqmplte</tttle> 


<Scrtpt src="]s/Three.]s"></scrtpt> 








<Scrtpt src="]s/sqmple.]s"></scrtpt> 
</head> 


<body></body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. aqddEventLtstener("1ogd"。 functtonC){ 
// Three.js を 初期 化 
Var renderer = new THREE.WebGLRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 3296 ピ クセ ル 
renderer.setStze(329, 329): 
// Three .js に よっ て 生成 され た Canvags を ペー ジ の 末尾 に 追加 
document . body .qgppendCht1dCrenderer.domEtement): 
// カメ ラ を 初期 化 
Var Cogmerq = new THREE.PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 
caqmerg.POS1tton. set(59, 49, 39): 
caqmera.tookAt( fx: の, y:9 の , z: の } ): 
// オプ ジェ クト を 初期 化す る 
var cube = new THREE .Mesh( 
// 立方 体 の XYZ サ イズ を 設定 
new THREE . CubeGeometry(29, 29, 29), 
// マテ リア ル を Lambert に 
new THREE .MeshLambertMatertal({color: 9x9999ff1) 
う : 
// シー ン を 初期 化す る 
var Scene = new THREE.Scene(): 
// 立方 体 を 3D シ ー ン に 追加 
SCene . qdd(cube): 
// カメ ラ を 30D シ ー ン に 追加 


Scene . qdd(cqmera): 


mW ビ ピロ T| 口 NN -2 ス 5 ョ m 立方 体 な どの 物体 を 回 転 さ せる 


// 光源 を 追加 4 
var tight = new THREE.DtrecttonatLight(C の x9909ff、 1.25): 
// 光源 の 位置 を 設定 
ltght.posttton.set(299, 269, 199): 
scene . add( L1ght): 
Var rotY = の : 
// レン ダリ ング 。 アニ メー ショ ン ご と に 呼び 出す 
functton render()1 
// 立方 体 の Y 軸 を 回 転 
rotY = rotY + 9.091: 
Cube . rotatton .y = POtY: 
// 定期 的 に 描画 する よう に する 
requestAntmottonFrame(render): 
renderer.render(scene, Camero): 
} 
render( ): 


+。 false): 


ブラ ウザ で index.html を 表示 する と 、 青色 の 立方 体 が Y 軸 回 転 し ます 。 回 転 角 度 を 指定 
すれ ば 、 他 の 軸 も 同時 に 回 転 さ せる こと も で きま す 。 





ロ 八 ご /5 SBAUBO/SBAUE バ ) 革 こ に まき 提 *4 ョ トロ 


ロロ NEPHINT 


Threejjs で 作成 し た 物体 を 回 転 き せる に は 、 物体 の 情報 を 持つ オプ ジェ クト の 


「rotation.x | プロパ ティ 、「rotationy」 プロ パテ ィ 、「rotation.z」 プロ パテ ィ に 角度 (ラジ 

設定 し た だ け で は アニ メー ショ ン し な いた め 、 角度 を 少し ず 
つ 変 更 し ます 。 角度 を 変更 し た ら 、 一 定時 間 ご と | render() 」 メ ノッ ド を 呼び 出し ます 。 こ 
れ で 、 物体 が アニ メー ショ ン す る よう に な り ま す 。 





関連 項目 ゅ pl 


@ 方 体 な どの 物体 を 移動 させ る も ine D.574 
@ 方 体 な どの 物体 の スケ ー ル を 変更 する … lionrrrrrrrrri DS アメ / 
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=1 コ malmINB ン と = 
立方 体 な どの 物体 を 移動 させ る 


ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Threejs ラ イブ ラリ を 使っ て 立方 体 な どの 物 
体 を 移動 させ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metg Charset="utf-8"> 
<tttte>SqmpLe</tttle> 
<SCrtpt src="]s/Three . ]S "></scrtpt> 
<SCPtDpt src="]s/sqmple.]S"></scrtDpt> 

</head> 

<body></body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1ogd" , functton(){ 
// Three.js を 初期 化 
var renderer = new THREE .WebGLRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピク セル 
renderer.SsetStze(329, 320): 
// Three.js に よっ て 生成 され た Cgnvgs を ペー ジ の 末尾 に 追加 
document . body . appendCht1ld(Crenderer .domEtement): 
// カメ ラ を 初期 化 
Var cgqmeraq = new THREE.PerspecttveCamera(49, 1.9, 1, 199909): 
// カメ ラ 位 置 を 設定 
Camera.DpOS1tton.Set(59, 49, 39): 
caqmera. LookAt( fx: の 9。y:9, z: の 9 } ): 
// オプ ジェ クト を 初期 化す る 
Var' cube = new THREE .Mesh( 
// 立方 体 の XYZ サ イズ を 設定 
new THREE .CubeGeometry(29, 29, 29), 
// マテ リア ル を Logmbert に 
new THREE .MeshLambertMatertal({cotlor: 9x9999ff}) 
): 
// シー ン を 初期 化す る 
var Scene = new THREE .Scene(): 
// 立方 体 を 3D シ ー ン に 追加 
Scene . qdd( cube ): 
// カメ ラ を 3D シ ー ン に 追加 


Scene . qdd(cqmero): 


mW 呈 ビ ロ T| 口 NN-246m 立方 体 な どの 物体 を 移動 させ る 


// 光源 を 追加 記 る 
var tight = new THREE.DtrecttonatLtght( の x9999ff 1.25): 
// 光源 の 位置 を 設定 
1ight.posttton . set(299, 269, 199): 
scene . aqdd( Ltght): 

// アニ メー ショ ン す る 際 に 必要 な 角度 を 入れ て お く 変 数 
var degree = の: 
// レン ダリ ング 。 アニ メー ショ ン ご と に 呼び 出す 
functton render(){ 
// 立方 体 の Y 座 標 を サイ ンカ ー プ に 沿っ て 設定 
degree = degree + 2: 
var rad = degree * Math.PI / 189: 
var posY = Math.stn(rad) * 20: 
Cube .DOS1tton.y = POSY: 
// 定期 的 に 描画 する よう に する 
requeSstAntmattonFrame(render): 
renderer.render(scene, Caqmera): 
} 
render( ): 
+。 faqlse): 


プラ ウザ で index.html を 表示 する と 、 Y 方 向 の み 座 標 を 変更 し て いる た め 、 青色 の 立方 体 
が 上 下 に 動き ます 。 
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還 王 ビビ TI ロロ N-246 mW 立方 体 な どの 物体 を 移動 させ る 


移動 させ る に は 


語 明 較 [position.x」 「position.y」 [position.zZ] プロ パテ ィ を 使う 


Threejs で 作成 し た 物体 を 移動 さす せる に は 、 物体 の 情報 を 持つ オブ ジェ クト の 「position. 
x」 プロ パテ ィ 、「positony」 プ ロ パ ティ 、「positionz] プロ パテ ィ に 座標 値 を 設定 し ます 。 座 


標 値 を 設定 し た だ け で は アニ メー ショ ン し な いた め 、 座標 値 を 少し ずつ 変更 し ます 。 座標 値 
を 変更 し た ら 、 一 定時 間 ご と に 「render() 」 メ ノッ ド を 呼び 出し ます 。 これ で 、 物 体 が アニ メー 
ン ョ ン し て 移動 する よう に な り ま す 。 





関連 項目 pp 
7 殺人 性 六 の 09 義 友 還 栗 容 生生 onimr tetAzee02 26026 22 ま AReS2SU。。 D.572 
@ 立方 体 な の の 物 作 の スケ ー ル 春 開 析 守 る トー D.577 


BE ビビ TIHN- ど 人 オプ 


立 万 体 な どの 物体 の スケ ー ル を 変更 する 





ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Three.js ラ イブ ラリ を 使っ て 立方 体 な どの 物 
体 の スケ ー ル を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<eta Charset="utf-8"> 
<tttle>Sample</t1tle> 
<SCrtpt src="]s/Three . ]S "></SCrtDt> 
<SCP1Dt Src="]S/sample.]S"></SCP1Dt> 
</head> 
<body></body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.aqddEventLtstener("Logd" 。 functton()1# 
// Three.js を 初期 化 
var renderer = new THREE .WebGLRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピク セル 
renderer.SetStze(329, 320): 
// Three.js に よっ て 生成 され た Cgnvgs を ペー ジ の 末尾 に 追加 
document . body .qppendChtld(Crenderer .domE Lement): 
// カメ ラ を 初期 化 
var comera = new THREE.PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位置 を 設定 
Camera.DOSttton.Set(59,。 49, 39): 
camera.lookAt( {x: の 9, y: の 9 の, z: の 9 } ): 
// オプ ジェ クト を 初期 化す る 
var cube = new THREE .Mesh( 
// 立方 体 の XYZ サ イズ を 設定 
new THREE .CubeGeometry(29, 29, 29), 
// マテ リア ル を Lagmbert に 
new THREE .MeshLaqmbertMatertal({color: の x9990ff}) 
): 
// シー ン を 初期 化す る 
var scene = new THREE.Scene(): 
// 立方 体 を 3D り シー ン に 追加 
Scene .Qdd(Cube): 
// カメ ラ を 3D シ ー ン に 追加 


scene .qdd( camera): 


画 
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思 ビビ TI ロロ - ラ オプ 立方 体 な どの 物体 の スケ ー ル を 変更 する 


/ 光源 を 追加 / 
var ltght = new THREE.DtrecttonalLight( の x9999ff 。 1.25): 
// 光源 の 位置 を 設定 
ltght.posttton . set(299, 269, 199): 
scene .qdd( L1ght): 

/ アニ メー ショ ン す る 際 に 必要 な 角度 を 入れ て お く 変 数 
var degree = 0 の: 

レン ダリ ング 。 アニ メー ショ ン ご と に 呼び 出す 

functton render(){ 
// 立方 体 の 長 さ を サイ ンカ ー プ に 沿っ て 設定 
degree = degree + 2: 
var rad = degree * Math.PT / 180: 
var scaleY = Math.abs(Math. stn(rad)): 
Cube .scale.y = scaleY: 
// 定期 的 に 描画 する よう に する 
requestAntmattonFrame(render): 
renderer.render(scene, Camero): 

} 

render( ): 

},fqlse): 


プラ ウザ で index.html を 表示 する と 、 立方 体 が 縦 方 向 に 伸縮 する アニ メー ショ ン が 表示 さ 
れ ま す 。 





mm 王 ビ ピロ T 口 NN -2 オ スワ Wm 立方 体 な どの 物体 の スケ ー ル を 変更 する 


スケ ー ル を 変更 する に は 
mM 有 MMl scale.x」 「scale.y」 「scale.z」 プロ パテ ィ を 使う 


Threejs で 作成 し た 物体 の スケ ー ル を 変更 する に は 、 物体 の 情報 を 持つ オプ ジェ クト 
の 「scalex」 プ ロ パ ティ 、「scale.y」 プロ パテ ィ 、| scale.z」] プロ パテ ィ に スケ ー ル 値 を 設定 
し ます 。「1.0」 が 100% サ イズ に な り ま す 。「20」 を 指定 する と 、 2 倍 の サイ ズ に な り ま す 。 
また 、 スケ ー ル 値 を 設定 し た だ け で は アニ メー ショ ン し な いた め 、 値 を 少し ずつ 変更 し ま 
す 。 値 を 変更 し た ら 、 一 定時 間 ご と に 「render() 」 メ ソ ッ ド を 呼び 出し ます 。 これ で 、 物 
体 の 大 き さ が 変化 する アニ メー ショ ン が 表示 され ます 。 









関連 項目 「 
@ 方 体 な どの 物体 を 回 転 さ せる 隊 近 すす てすと ド ス て て し ルル て KEY スス た CLOCKCLOOCLKLLI い D.5/ ど 
@ 立方 体 な どの 物体 を 移動 させ る 0 共生 D.b/ オ 4 
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LChrome 1 Safari 5 | Firefox 4 


っ ED TIHN- ど 人 4 日 


文字 を 3D で 描画 する 








ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Threejs ラ イブ ラリ を 使っ て 文字 を 3D で 描画 
する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<tttle>Saqmple</tttle> 
<SCrtDt src="]s/Three .]S "></scrtDpt> 
<SCcrtpt src="]s/helvetitker_regutar .typeface . ]S "></scrtpt> 
<SCrtDt Src="]S/Ssqmple.]S"></SCPtDt> 
</head> 
<body></body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("toad"。 functton(){ 
// Three.js を 初期 化 
var renderer = new THREE .WebGLRendererC): 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピクセル 
renderer.SetStze(329, 329)・ 
// Three .js に よっ て 生成 され た Cgnvgs を ペー ジ の 末尾 に 追加 
documernt. body .qppendChtld(Crenderer . domEtement): 
// カメ ラ を 初期 化 
var camerq = new THREE .PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 
Camerq.DOS1tton. set(59, 39, 69): 
caqmera.tookAt( {x:29,。y: の 9, z: の 1 ): 
// テキ スト を 初期 化す る 
var text3D = new THREE.Mesh( 
// 文字 デー タ の 設定 
new THREE . TextGeometry( 
// 描画 する 文字 を 設定 
"C&R"、t 
// サイ ズ と 高 さ を 描 画 
Stze: 15, 
hetght: 6 
}), 
// マテ リア ル の 設定 (スム ー ス シェ ー デ ィング を 指定 ) 
new THREE .MeshPhongMatertal({ color: 9xffffff, shaditng: THREE.SmoothShading }) 
う : 


mm 王 己 ロ 丁 | 口 N - ら 4 日 m 文字 を 3D で 描画 する 


// シー ン を 初期 化す る h イ 
var Scene = new THREE.Scene(): 
// テキ スト を 3p シ ー ン に 追加 
scene .Qdd(tex 寺 3D): 
// カメ ラ を 3D シ ー ン に 追加 
Scene .Qdd(cqgmera): 
// 光源 を 追加 
var ltght = new THREE.DtrectionalLtght(9x9999ff, 2): 
// 光源 の 位置 を 設定 
ltght.posttton . Set(299, Z69, 199): 
scene . qddC Light): 
// アニ メー ショ ン す る 際 に 必要 な 角度 を 入れ て お く 変 数 
var rotX = の : 
// レン ダリ ング 。 アニ メー ショ ン ご と に 呼び 出す 
functton render()+ 
// 文字 の Y 軸 を 回 転 
PotX = rotX + の .02: 
text3D . rotatton .X = POtX: 
// 定期 的 に 描画 する よう に する 
requestAntmattonFrame(render): 
renderer.render(scene, Caqmerq): 
} 
render(): 
+, fatse): 





ブラ ウザ で index.html を 表示 する と 、 C&R の 文字 が 表示 され 、 X 軸 に 回 転 し ます 。 
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m 呈 ビビ TI ロト NI-2 4 日 m 文字 を 3D で 描画 する 


ョ =: ヨ ョ ョ に 中 「hree.jS で 文字 を 描画 する に は typeface.jS を 使う 


Three.js で 文字 を 捕 画 する に は 、 typefacejs が 必要 で す 。 Three.js フ ァイル を 読み 
込ま せ た 後 に 使用 する 書体 に 応じ た typefacejs ラ イブ ラリ ファ イル を 読み 込ま せま す 。 

次 に |new THREE.Mesh(」 を 使っ て 描画 する 文字 と マテ リア ル ( 質 感 ) を 指定 し ま 
す 。 最初 の パラ メー タ に は 、|new THREE.TextGeometry() 」 を 指定 し ます 。 パラ メー 
タ に は 、 文字 と サイ ズ や 奥行 き の 幅 を 指定 し ます 。 文字 の サイ ズ は 「size」、 奥行 き の 幅 
は | height」 で 指定 し ます 。「new THREE.Mesh () 」 の 2 番目 の パラ メー タ に は 、 マテ リ 
アル を 指定 し ます 。 

な お 、 typefacejs は 次 の URL か ら 入 手 す る こと が で きま す 。 
w tyDefaCe.jS 
httD://typefaCe.ne0CraCV.Org/ 


mimi 員 四 に 上 識 べべ ベル を 指定 する に は 


文字 に べ ベベ ル を 指定 する 場合 は 、「 THREE.TextGeometry() 」 に 、 次 の オプ ショ ン 
を 指定 し ます 。 
















bevelEnabled : true, 
bevelStze : 9.5, 


bevelThtckness : 









1 






EE ビビ TIN- ど 合 け 


材 ( フ ォ グ ) を 設定 する 








ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Threejs ラ イブ ラリ を 使っ て 竣 ( フ ォ グ ) を 
する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 


<tit1e>SqmpLe</t1tle> 


Aa 
本 


<SCcrtpt src="]s/Three .]S "></SCr1Dt> 
<scrtpt src="]s/hetvettker_regular .typeface . ]S "></SCr1DPt> 
<SCrtDt src="]S/Sample .]S "></SCr1Dt> 
</head> 
<body></body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .addEventLtstener("Loqgd" 。 functton()†+ 
// Three.js を 初期 化 
var renderer = new THREE.WebGLRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 329 の ピク セル 
renderer.setStze(329, 320): 
// Three.js に よっ て 生成 され た Cqnvgs を ペー ジ の 末尾 に 追加 
document.body .qgppendChttdCrenderer .domELement): 
// カメ ラ を 初期 化 
var caqmera = new THREE .PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 
camera.POSttton . set( の 9, 9, 199): 
camera.LookAt( fx: の 9,。y:9, z: の 1 ): 
// テキ スト を 初期 化す る 
var text3D = new THREE .MeshC 
// 文字 デー タ の 設定 
new THREE .TextGeometry( 
// 描画 する 文字 を 設定 
"WebGL&JavaScrtpt"。 1 
// サイ ズ と 高 さ を 描画 
Stze: 15, 
height: 6 
} わ , 
// マテ リア ル の 設定 (スム ー ス シェ ー デ ィング を 指定 ) 
new THREE .MeshPhongMatertgl({ cotor: の 9xffffff。 shadtng: THREE.SmoothShadtng }) 
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還 ビビ ピロ T| 口 NN - ラ イオ 9 m 明 ( フ ォ グ ) を 設定 する 


): 4 
// テキ スト の 回 転 角度 と 位置 を 設定 

tex て 3D. rotatton.y = Math.PI / 3: 

text3D .pos1t1on.x = -39: 


// シー ン を 初期 化す る 
var Scene = new THREE.Scene(): 
// テキ スト を 3p シ ー ン に 追加 
Scene . qdd(text3D ) : 
// カメ ラ を 3p シ ー ン に 追加 
Scene . qdd(cameroa): 
// 光源 を 追加 
Var Light = new THREE.DitrectionqlLightC の 9x9999ff, 2): 
// 光源 の 位置 を 設定 
ltght .posttton . set(299, 269, 199): 
Scene .qdd( Ltght): 
// 毅 ( フ ォ グ ) を 追加 
// scene.fog = new THREE.FogCOxffffff,。 59, 229): 
Scene .fog = new THREE .FogExp2C9xffffff, 9.095): 
// 唆 ( フ ォ グ ) を 物体 に 適用 
text3D.fog = true: 
// レン ダリ ング 
renderer.render(scene, cqmera): 
}, fglse): 


プラ ウザ で index.html を 表示 する と 、 WebGL&JavaScript の 文字 に (フォグ) が 適用 き 
れ ま す 。 
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生 ビビ ロイ T| 口 | - ラ イ 9 m 駿 ( フ ォ グ ) を 設定 する 


mINI ヨ ml に lg 下 到 ( フ ォ グ ) を 設定 する に は 「fog] プロ バテ ィ を 使う 


Three.js で 霧 (フォ グ ) を 設定 する に は 、 シー ン の 「fog」 プ ロ パ ティ に フォ グ オ プ ブ ジ ェクト を 
設定 し ます 。 (フォ グ ) を 設定 で きる オブ ジェ クト (コン スト ラク タ ) は 、「 THREE.Fog0」 と 
「THREEFogPxp2() 」 が あり ます 。「THREEFog() 」 の パラ メー タ は 、 霧 の 色 と 肥 の 
手前 の 距離 、 奥 ま で の 距離 の 3 つの パラ メー タ を 指定 し ます 。 距離 は デフ ォ ル ト で は 手前 
の 距離 が 「1」、 奥 ま で の 距離 が 「1000」 に な っ て いま す 。「THREEFogExp2() 」 の パラ 
メー タ は 、 霧 の 色 と 霧 の 濃 さ で す 。 デフ ォ ル ト で は 有吉 の 濃 さ は |0.00025」 に な っ て いま す 。 

シー ン の 「fog」 プ ロ パ ティ に 却 を 処理 する オプ ジェ クト を 設定 し た だ け で は 、 物体 に 
有 霧 は 適用 され ませ ん 。 物体 に 霧 が 適用 され る よう に する に は 、 物体 の | fog」 プ ロ パ ティ に 
| true」 を 設定 し ます 。 















り の 人 6/ SBAUBO/SBAUEO ES に EEIE に 4Sa 


585 


LChrome 』 Safari 5 | Firefox 4 


ES 4 1 -2 違 


立体 の 影 を 表示 する 








ここ で は 、 WebGL で 手軽 に 3D 処 理 が 行え る Threejs ラ イブ ラリ を 使っ て 影 を 表示 する 方 
法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<t1tte>SqmplLe</tttle> 
<Scrtpt src="]s/Three . ]S "></scrtpt> 
<Scrtpt src="]s/helvettker_regular.typeface . ]s "></script> 
<SCPrtpt src="]s/sample.]S"></scrtDpt> 
</head> 
<body></body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd"。 functton(){ 
// Three. js を 初期 化 
Var renderer = new THREE.WebGLRenderer({aqnttqttas: true}): 
// 描画 領域 の サイ ズ は 縦横 と も 329 ピ クセ ル 
renderer.setStze(329, 320): 
// Three .js に よっ て 生成 され た Caqnvags を ペー ジ の 末尾 に 追加 
documert.body .qgppendChttdCrenderer .domELement): 
// カメ ラ を 初期 化 
Var camera = new THREE.PerspecttveCamera(49, 1.9, 1, 19999): 
// カメ ラ 位 置 を 設定 
Camerq.POS1tton . Set( の 9, 59, 199): 
camera.lookAt( {tx:9,y:9, z:9 } ): 
// テキ スト を 初期 化す る 
var text3D = new THREE.MeshC 
// 文字 デー タ の 設定 
new THREE . TextGeometry( 
// 描画 する 文字 を 設定 
"WebGL"。{ 
// サイ ズ と 高 さ を 描画 
stze: 15, 
hetght: 6 
}), 
// マテ リア ル の 設定 (スム ー ス シェ ー デ ィング を 指定 ) 
new THREE .MeshPhongMatertgl({ color: 9xffffff。 shading: THREE .SmoothShading }) 
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因 司 己 ロ 丁 | 口 N - つ 5 ら 口 m 立体 の 影 を 表示 する 


// テキ スト の 回 転 角度 と 位置 を 設定 和信 
text3D . rotatton.y = Math.PI / 4: 
text3D . posttton . set(-19, 15, 29): 
// 平面 を 作成 
var plane = new THREE.MeshC 
new THREE .PlqneGeometry(79, 1909) , 
new THREE .MeshLambertMatertalC{tcolor: の 9x79ff79}) 
う : 
// 平面 の 位置 を 設定 
plLane.posittton.set( の 9,9, -39): 
// シー ン を 初期 化す る 
var scene = new THREE.Scene(): 
// テキ スト を 3p シ ー ン に 追加 
scene . odd(tex3D): 
// 平面 を 3D シ ー ン に 追加 
scene . qdd(Cptane ): 
// カメ ラ を 3D シ ー ン に 追加 
scene . add(cgmero): 
// 光源 を 追加 
var light = new THREE.SpotLtghtC9xffffff, 1, 9, true): 
// 光源 の 位置 を 設定 
ttght.posttton . set(299, 269, 199): 
scene . add( 1ght): 
// 影 が 表示 され る よう に レン ダラ ー や 物体 に 設定 
renderer.SshadowMapEnabLed = tFrue: 
ltght . castShadow = true: 





text3D . castShadow = true: 

plane.recetveShadow = true: 

// レン ダリ ング 

renderer.render(scene, Camera): 
+, false): 


プラ ウザ で index.html を 表示 する と 、 WebGL の 文字 の 影 が 文字 より も 下 に ある 平面 に 表 
示さ れ ま す 。 
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王 ピロ 丁 | 口 N -25 ら 口 m 立体 の 影 を 表示 する 


= ヨコ ョ 中 立体 の 影 を 表示 する に は 「shadowMapEnabled」 プロ バテ ィ な ど を 使う 


Threejs で 影 を 表示 する に は 、 いく つか の 条件 と 設定 が 必要 で す 。 まず 、 物体 に 影 
を 沙 と すこ と が で きる 光源 は スポ ッ ト ラ イト の み で す 。 環境 光 や 点 光 源 で は 、 影 は 描画 で 
きま せん 。 また 、 レン ダラ ー の 「shadowMapEnabled」 プ ロ パ ティ に 「true」 を 設定 する 必 
要 が あり ます 。 

実際 に 彰 を 落と す 物 体 に は 「castShadow」 プ ロ パ ティ に 「true」 を 設定 し 、 影 を 受け 
る 物体 に は |「receiveShadow」 プ ロ パ ティ を 「true」 に 設定 し ます 。 影 を 落と し つつ 、 さら 
に 他 の 物体 の 影 $ る 受け る 場合 は 、「castShadow 」 プロ パテ ィ と 「receiveShadow | プロ 
パテ ィ の 両方 に | true」 を 設定 する 必要 が あり ます 。 

な お 、Safari 5x で は 、| receiveShadow」 プ ロ パ ティ に 「true」 を 設定 し た 物体 が ある 
と ペー ジ が 延々 と リロ ー ド され 、 最後 に は 表示 され な く な っ て し まう 不具 合 が 発生 する こと 
が あり ます 。 











関連 項目 ょ ょ ! 
3 本 震 3 導い 202 は 4 境 0 3626Nory200v2P く YS22200002 43 p.54 


LIE9 』Chrome 』 Safari 5 | Firefox 4 1 Opera 11 1 OS5 』 Android2 」WP_ 


ENー ン 91 


WebGL が 使え な い デ バイ ス で も 
3D 指 画 を 可能 に する 


ここ で は 、iPhone/iPad や Android な ど WebGL が ブラ ウザ か ら 使 えな い デ バイ ス で も 3D 捕 
画 を 可能 に する 方 法 に つい て 解説 し ます 。 


= まあ 中央 = 坦 丁 mm】 首 HTML の コー ド (index.htmD) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<title>SqmpLe</t1tLe> 
<SCrtpt src="]s/Three .]S "></SCr1Dt> 
<SCrtpt src="]S/Samplte.]S"></SCr1Dt> 

</heqd> 

<body></body> 

</html> 


= ある 2 末 = 才 四 ml』e】 JavaScriDt の コー ド (sample.jS) 
wtndow.aqddEventLtstener("1Load" 。 functton()+ 
// Three.js を 初期 化 
// var renderer = new THREE .WebGLRenderer( ): 
var renderer = new THREE .CanvasRenderer(): 
// 描画 領域 の サイ ズ は 縦横 と も 329 ピ クセ ル 
renderer .SetStze(32Z9, 329): 
// Three.js に よっ て 生成 され た Canvgs を ペー ジ の 末尾 に 追加 
document.body .qppendChtldCrenderer .domE Lement): 
// カメ ラ を 初期 化 
var camera = new THREE .PerspecttveCamera(49, 1.9。 1, 19990): 
// カメ ラ 位 置 を 設定 
camera.POSttton.Set(59, 49, 39): 
camera.LookAt( ftx: の 9, y:9, z: の 1 ): 
// オプ ジェ クト を 初期 化す る 
var torus = new THREE .Mesh( 
// トー ラス の サイ ズ を 設定 
new THREE . TorusGeometry(12,3,5, 19), 
// マテ リア ル を Laqmbert に 
new THREE .MeshLambertMatertaql() 
う : 
// シー ン を 初期 化す る 
var Scene = new THREE.Scene(): 
// トー ラス を 3D シ ー ン に 追加 
Scene . qdd(torus ): 
// カメ ラ を 3D シ ー ン に 追加 


scene . qadd( caqmerqa): 


』 還 1 
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m ビ ロイ T| 口 N-25 1 mw WebGL が 使え な い デ バイ ス で も 3D 描 画 を 可能 に する 


// 光源 を 追加 まる 
var ltght = new THREE.DtrecttonalLitght( の 9x9999ff。 1.25): 
// 光源 の 位置 を 設定 
Il1ght.posttton. set(299, 269, 199): 
scene .qdd( L1ght): 
// 回 転 角度 を 入れ る 変数 を 用 意 
Var rotX = の : 
Var rotY = の : 
// レン ダリ ング 。 アニ メー ショ ン 毎 に 呼び 出す 
functton render(){ 
// トー ラス の 巡 軸 を 回 転 
rotX = rotX + 9.02: 
rotY = rotY + の.091: 
torusS . POtqt1on .X = POtX: 
torus . rotatton .y = rotY: 
// 定期 的 に 描画 する よう に する 
requestAntmattonFrame(render): 
renderer.render(scene, caqmera): 
} 
render(): 
}+, faqtse): 


WebGL 表 示 が で き な い Android 標 準 プ ラウ ザ や iPhone/iPad の ブラ ウザ で も 3D 表 示 が 
可能 に な り ま す 。 





圏 http://www.openspc2.or.… 由 
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m 王 ビ ロイ T| 口 NN -2 ら ] mW WebGL が 使え な い デ バイ ス で も 3D 描 画 を 可能 に する 


iPhone や Android の Web ブ ラウ ザ は 、 WebGL に 対応 し て いま せん 。 こ の た め 、 
WebGL を 利用 し た 3D 描 画 を 行う こと は で きま せん 。 た だ し 、 Threejs に は 、 WebGL が 
使え な い 環境 で も Canvas に 3D 描 画 を 行う こと で 対処 する 方 法 が あり ます 。 

Canvas に 描画 する 場合 は 、| THREE.WebGLRenderer(O 」 の 代わ り に 、「 THREE. 
CanvasRenderer() 」 の レン ダラ ー を 指定 し 、「new THREE.CanvasRenderer() 」 と し 
ます 。 た だ し 、 すべ て が 同じ よう に 表示 され る わけ で は あり ませ ん 。 また 、 2D の Canvas に 
描画 し て いる た め 、 処理 速度 が か な り 低下 する こと も あり ます (ポリ ゴン 数 を 減ら せ ば 処 

理 速度 は 向上 する ) 。 


mm 商 引 に 症 9 で 表示 され な い 場 合 に つい て 


IE9 の 場合 は 、F12 キ ー を 押し て 開発 者 ツー ル を 表示 し て お か な いと 、 サン プル は 動 
作 し ませ ん 。 これ は 、IE で は 開発 者 ツー ル を 表示 し 、 ペ ー ジ を リロ ー ド し な いと 、| console」 
オプ ジェ クト に アク セス で き な い た めで す 。 

同様 の 理由 で 、 TE を 搭載 し て いる Windows Phone(7.5) で は 開発 者 ツー ル が な いた 
め 、 動 作 し ませ ん 。 こ れ を 解消 する に は 、THREE.jsS ラ イブ ラリ の 先頭 (| use strict」 の 次 ) 
に 、 次 の コー ド を 追加 し ます 。 これ で 、 Windows Phone で も 動作 する よう に な り ま す 。 

















console={} : console .wgrn=console .error=console. tog=functton()1}: 


関連 項目 ゅ 
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LIE9 』Chrome Safari 5 | Firefox 4 1 Opera11 1 iOS5 I Android4 IWP_ 


ee 1 上 コー ブフ 二 半 


SVG の 図形 の サイ ズ を 変更 する 


ここ で は 、 イン ライ ン SVG を 使っ て 表示 され た 図形 の サイ ズ を 変更 する 方 法 に つい て 解説 し 
ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttle>Sqmpte</ttt1e> 
<SCr1Dt Src="]S/sampte .]S "></scrtpt> 
</heqd> 
<body> 
<h3>SVG で 表示 し た 四角 形 の サイ ズ を 変更 する </h3> 
<formW> 
<tnput type="button" vglue=" サ イズ を ラン ダム に 変更 " id="check"> 
</form> 
<Svg wtdth="32 の 9" hetght="240"> 
<rect x="19" y="5" f 生 11="#ffO909" stroke="#990999" wtdth="299" hetght="189" /> 
</ SVdg> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.gddEventLtstener("1oad" functton(){ 
// ボタ ン に イベ ント を 設定 
document .getEtementByTd("check").qddEventListener("cltck", functton(){ 
// 乱数 値 を 算出 
var w = Moth.floor(Math. raqndom()*199)*3+10: 
var h = Math.floor(CMath . random()*199)*2+10・ 
// SVe の 最初 の rect 要 素 を 取得 
var SvgRect = document.getELementsByTagName( "rect")[9] : 
// 四角 形 の 横幅 と 縦 幅 を 設定 
svgRect . setAttrtbute( "wtdth" 。w): 
svgRect. setAttrtbute("hetght",h): 
+, false): 
}, faqtse): 





の AG/E SBAUBO/SBAUBO SEEWESNZS 


592 


還 ロイ T| 口 NN -2 ら 2 m SVG の 図形 の サイ ズ を 変更 する 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 SVG で 描画 され た 四角 形 の サイ ズ 
が ラン ダム に 変わ り ま す 。 


ass VC の 図形 の サイ ズ を 人 更 する に は 
図形 を 示す 要素 の 「width」 属 性 と 「height」 属性 の 値 を 変更 する 


イン ライ ン SVG を 使っ て 描画 され た SVG の 図形 の サイ ズ を 変更 する に は 、 図形 を 示 
す 要 素 の 「width」 属 性 と 「height」 属 性 の 値 を 変更 し ます 。 属性 値 を 変更 する に は 、 
「setAttribute() 」 メ ソ ッ ド を 使い ます 。「setAttribute() 」 メ ソ ッ ド の 最初 の パラ メー タ 
に は 変更 し た い 属 性 名 を 文字 列 で 指定 し 、 2 番目 の パラ メー タ に は 設定 する サイ ズ を 指 
定 し ます 。 





関連 項目 


e SVG の 図形 の 位置 を 変更 する ーー ドド omomomoeoeoeneneneeneenenermrnmnr Dp.594 
e SVG の 図形 を 変形 する ーー ドド ドド ドド D.596 
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画 有 | 


LIE9 』 Chrome | Safari 5 | Firefox 4 1 Opera11 1 iOS5 | Android4 1 WP 」 


=1 ヨ malmINB ン に 
SVG の 図形 の 位置 を 変更 する 


ここ で は 、 イン ライ ン SVG を 使っ て 表示 され た 図形 の 位置 を 変更 する 方 法 に つい て 解説 し 
ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<ttle>SampLe</t1tt1e> 
<SCPtDt src="]S/sample.]S"></scrtDpt> 
</head> 
<body> 
<h3>SVG で 表示 し た 四角 形 の 位置 を 変更 する </h3> 
<form> 
<tnput type="button" vaqlue=" 位 置 を ラン ダム に 変更 " 1d="setPos"> 
</form> 
<Svg wtdth="329" hetght="249"> 
<rect x="19” y="5” ftlLl="#ffO の 9099" stroke="#909999" wtdth="89" hetght="59" /> 
</'SVqg> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.qddEventLtstener("1ogd" 。 functton(){ 

// ボタ ン に イベ ント を 設定 

document .getEtementByTd("setPos").qddEventLtstener("clttck"。 functtonC){ 
// 乱数 値 を 算出 
var newX = Math.floor(Math . random()*99)*3+10: 
var newY = Math.floor(CMath. random()*79)*2+10: 
// SVe の 最初 の rect 要 素 を 取得 
Var' svgRect = document.getEtementsByTagNagme( "rect")[9] : 
// 四角 形 の X 座 標 と Y 座 標 を 設定 
svgRect. setAttrtbute("x"。 newX): 
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svgRect . setAttrtbute("y"。 newY): 
}。 foqlse): 
}, fgqlse): 
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生 王 選 ピエ | 口 NN -2 ら 3 mw SVG の 図形 の 位置 を 変更 する 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 SVG で 描画 され た 四角 形 の 位置 
が ラン ダム に 変わ り ま す 。 


SVG で 表示 し た 四角 形 の 位置 を 変更 する 


| 信 首 え ラン タム に 旋 更 


3 こび G の 図形 の 位置 を 変更 する に は 
図形 を 志す 要素 の 「x」 属 性 と 「y」 属 性 の 値 を 変更 する 


イン ライ ン SVG を 使っ て 描画 され た SVG の 図形 の 位置 を 変更 する に は 、 図形 を 示す 妥 
素 の 「x | 属性 と [「y」 属 性 の 値 を 変更 し ます 。 属性 値 を 変更 する に は 、| setAttribute() 」 
メソ ッ ド を 使い ます 。「setAttribute() 」 メ ノッ ド の 最初 の パラ メー タ に は 変更 し た い 属 性 
名 を 文字 列 で 指定 し 、 2 番目 の パラ メー タ に は 設定 する 位置 を 指定 し ます 。 


関連 項目 


e SVG の 図形 の サイ ズ な を 変更 する emem Dp.592 
「] SVG の 図形 を 変形 する 作り も が lt も 1 も 代 eie. 放 電光 法 4 あ る ま 人 人 枯 が 錠 すま 天 小 e ki ます dn を 相 4 す Mi ev D.596 
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LIE9 』Chrome 』 Safari 5 」 Firefox 4 Opera 11 1 iOS5 | Android4 1 WP 


ー 】 - 世 四条 半 1 問 】 ニャ ーー 


SVG の 図形 を 変形 する 


ここ で は 、 イン ライ ン SVG を 使っ て 表示 され た 図形 を 変形 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<mWeto charset="utf-8"> 
<tttle>Sqmpte</t1t1e> 
<ScrtDt src="]s/sample.]S"></scrtDt> 
</head> 
<body> 
<h3>SVG で 表示 し た 図形 を 変形 する </h3> 
<forrW> 
| <tnput type="button" vaqlue=" 回 転 " td="rotate"> 
ーー <tnput type="button" value=" 傾 斜 " 1d="skew"> 
n <tnput type="button" vaqtue=" 拡 大 縮小 " id="scqte"> 
<tnput type="button" vglue=" 移 動 " td="transtqte"> 
</form> 
<Svg wtdth="32 の 9" hetght="240"> 
<rect x="169" y="129" fi11="#ffO990" stroke="#909999" wtdth="80" hetght="59" /> 
</SVdg> 
</body> 
</html> 


JavaScript の コー ド (sample.s) 


wtndow.qddEventLitstener("toad"。 functton(){ 
// SVe の 最初 の rect 要 素 を 取得 
var svgRect = document.getELementsByTagName("rect")[9]: 
// ボタ ン に イベ ント を 設定 【 回 転 】 
document.getEtementByIdC"rotqte").gddEventListener("click", functton(){ 
// 乱数 値 を 算出 
var r = Math.random()*360: 
// trgnsform 属 性 に 値 を 設定 。 2 番目 と 3 番目 は 回 転 の 中 心 
SvgRect.setAttribute("transform", "rotate("+r+"。169, 129)"): 
} ょ , fqlse): 
// ボタ ン に イベ ント を 設定 【 傾 斜 】 
document.getEtementById("skew").qddEventLtstener("click", functton(){ 
// 乱数 値 を 算出 
Var sr = Math.random()*69 - 39: 
// transform 属 性 に 値 を 設定 
SvgRect.setAttrtbute("transform", "skewXC"+sr+" う "): 
}。 fgalse): 
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mm 王 TI 口 N - ら 5 ら 2 mw SVG の 図形 を 変形 する 


// ボタ ン に イベ ント を 設定 【 拡 大 縮小 】 も 
document.getEtementById("scgte").qddEventLitstener("cltck"。functton(){ 
// 乱数 値 を 算出 
var s = Math.random()*2-9.5: 
// trgnsform 属 性 に 値 を 設定 
svgRect. setAttrtbute("transform",。 "scate("+S+"」"+S+ す "うう 5: 
+, false): 
// ボタ ン に イベ ント を 設定 【 移 動 】 
document .getELementById("translate").aqddEventLtstener("cltck", functton()+ 
// 乱数 値 を 算出 
var x = Math.random()*289 - 120: 
var y = Math.random()*129 - 60: 
// transform 属 性 に 値 を 設定 
svgRect . setAttrtbute("transform", "transtate("+x+""+y+" う ") う : 
}, faqlse): 
}, false): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 ボタ ン に 対応 し た 変形 処理 が 行わ 
ね れ ます 。 
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597 


m 王 ビ ピロ T| 口 NN - ら 5 4 mw SVG の 図形 を 変形 する 


= ヨコ ョ = に 中 SVG の 図形 を 変形 する に は 「transform」 属 性 を 使う 


イン ライ ン SVG を 使っ て 搬 画 され た SVG を 変形 する に は 、[「transform」 属性 に 変 
形 を 示す 文字 列 を 指定 し ます 。 変形 させ る に は 次 に 示す 文字 列 と 値 を セッ ト に し ます 。 
| setAttribute() 」 メ ソ ッ ド の 最初 の パラ メー タ に は 「"transform'」 を 文字 列 で 指定 し 、 
2 番目 の パラ メー タ に は 変形 内 容 を 示す 文字 列 を 指定 し ます 。 


3 了 人 


matrix abcdef 行列 を 利用 し て 変形 

rotate 回 転 。 回 転 の 中 心 座標 は 省略 で きる 
scale 
SkewX 
skewY 
translate 


複数 の 変形 を まとめ て 行う に は 、「matrix」 を 使う か 、[「scale(2) skewX(-2) rotate(45) | 
の よう に 半角 空白 で 区 切っ て 列記 し ます 。 





内 放 王 四 用 2 
e SVG の 図形 の サイ ズ を 変更 する 2: 欄間 TRSeoR0ESApoorDie: 人 人 
<SVG の 図形 の 位置 変更 する …………… ド et 0 の 
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|IE9 | Chrome 1 Safari 5 1 Firefox 4 1 Opera11 】 iOS 5 」 Android4 1WP」 


=1 ゴ glmIN 昌 に に 
SVG の 図形 の 塗り や 線 の 色 を 変更 する 


ここ で は 、 イン ライ ン SVG を 使っ て 表示 され た 図形 の 塗り や 線 の 色 を 変更 する 方 法 に つい 
て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>Sqmple</tttle> 








<scrtpt src="]s/sample.]S "></SCr1Dt> 
</head> 
<body> 
<h3>SVG で 表示 し た 正 円 の 色 を 変更 する </h3> 
<form> 
<input type="button" value=" 色 を ラン ダム に 変更 " 1d="setColor"> 
</form> 
<svg width="329" hetght="Z49"> 
<ctrcle cx="169" cy="129" r="95" fil1="#ff9099" stroke="#999990" stroke-wtdth="10" /> 
</ SVg> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow.addEventLtstener("1ogd" , functton(){ 

// ボタ ン に イベ ント を 設定 

document.getELementByIdC"setCotor").qddEventLtstener("clLtck" , functton(){ 
// 乱数 値 を 算出 CrE9/Firefox は #rrggbb 形 式 で な いと 駄目 ) 
var fR = ("9"+Math.flLoor(Math. random() * 256)).sLtce(-2): 
var fG = ("の 9"+Math.floor(Math. random() * 256)).sLtce(-2): 
var fB = ("9 の"+Math.fLoor(Math. random() * 256)).sLtce((-2): 
var sR = ("9"+Math.floor(Math. random() * 256)).sLtce(-2): 
var sG = ("の "+Math.floor(Math . random() * 256)).sLtce(-2): 
var sB = ("9"+Math.floor(Math .random() * 256)).sLtce(-2): 
var color1 = "#"+fR+fG+fB: 
var color2 = "#"+SR+SG+SB: 
// SVG の 最初 の rect 要 素 を 取得 
var svgRect = document.getELementsByTagName("ctrcte”)[9]: 
// 塗り の 色 を 設定 
svgRect .setAttrtbute("ftL1" color1):. 
// 線 の 色 を 設定 
svgRect. setAttrtbute("stroke", Color2): 

+。 fgqtse): 
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m コ E ビ TIHN-2 つ 55 mw SVG の 図形 の 塗り や 線 の 色 を 変更 する 


+。 false): 4 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 SVG で 描画 され た 円 の 塗り や 線 の 
色 が ラン ダム に 変わ り ま す 。 














TI こび 6 の 図形 の 塗り や 線 の 色 を 変更 する に は 
図形 を 示す 要素 の 「fil」 属 性 や 「stroke」 属 性 の 値 を 変更 する 


イン ライ ン SVG を 使っ て 描画 され た SVG の 塗り の 色 を 変更 する に は 、 図形 を 示す 要素 の 
| 名 ] 属 性 の 値 を 変更 し ます 。 線 の 色 を 変更 する に は 、「stroke」 属 性 の 値 を 変更 し ます 。 
これ ら の 属性 値 を 変更 する に は 、「setAttribute() 」 メ ノッ ド を 使い ます 。「setAttribute () 」 
メソ ッ ド の 最初 の パラ メー タ に は 変更 し た い 属 性 名 を 文字 列 で 指定 し 、 2 番目 の パラ メー タ 
に は 設定 する 位置 を 指定 し ます 。 

色 を 設定 する 場合 、 IE9 と Firefox で は 、「#rrggbb」 形 式 の 文字 列 に し な いと 、 色 が 
反映 され ませ ん 。 










LIE9 』 Chrome 1 Safari 5 | Firefox 4 1 Opera11 | iOS5 1 Android4 1WP」 


EE 1EHN・ の 5 双 


SVG の テキ スト の 内 容 を 変更 する 





ここ で は 、 イン ライ ン SVG を 使っ て 表示 され た テキ スト の 内 容 を 変更 する 方 法 に つい て 解 
し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 


に 3 


<head> 
<meta charset="utf-8"> 
<t1tle>SqmpLe</t1t 上 le> 
<SCr1Dt Src="]S/Ssqmple .]S"></SCr1Dt> 

</head> 

<body> 
<h3>SVG で 表示 され た 文字 を 変更 する </h3> 
<Svg w1dth="329" hetght="240"> 

<text 1d="clock" x="59" y="199" font-s1ze="69">12:34 : 56</text> 

</ SVg> 

</body> 

</html> 


JavaScript の コー ド (sample.jS) 


wtndow.qddEventLtstener("togd" 。functton(){ 
SetTnterval(functton( ){1 
// 現在 の 日 付 情報 を 取得 (生成 ) 
var dateOb] = new Date(): 
var h = ("の 9"+date0b] .getHours()).sL1ce(-2): 
var mm = ("の "+dote0b] . getMtnutes( )).sLtce( -2): 
Var Ss = ("の 9"+doateOb] . getSeconds()) .sLtce( -2): 
// SVG テ キス ト 要 素 を 取得 
var svgText = document.getEtementById("clock"): 
// 文字 を 変更 
svgText.textContent = h+":"TWT":"+S:i 
}, 19909): 

+, false): 
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生 ヒビ TI ロ NN -2 ら 6 w SVG の テキ スト の 内 容 を 変更 する 


プラ ウザ で index.html を 表示 する と 、SVG の テキ スト の 内 容 が リア ル タ イ ム に 変更 され ます 。 


SVG で 表示 され た 文字 を 変更 する 


10:05:22 





SVG の テキ スト の 内 容 を 変更 する に は 
2 [textContent」| プロ バ パティ を 使う 


イン ライ ン SVG を 使っ て 描画 きれ た SVGC の テキ スト の 内 容 を 変更 する に は 、[「text 
Content] プロ パテ ィ の 値 を 変更 し ます 。 また 、 <br> や 改行 コー ド (10、13/LF、CR) が 
各 ま れ て いて も 、 その 部 分 で 改行 され る こと は あり ませ ん 。 

また 、 文 字 サ イズ な ど 文 字 関連 の 属性 を 変更 する 場合 に は 、「svgText.setAttribute 
(font-size , 9):] の よう に 、「setAttribute() 」 メ ソ ッ ド を 使っ て 行い ます 。 








LIE9 1 Chrome 』 Safari 5 】 Firefox 4 1 Opera11 』 OS5 』 Android4 』WP_ 


所)N・ の ロウ が 


SVG の 図形 の グラ デー ショ ン の 種類 を 
変更 する 


ここ で は 、 イン ライ ン SVG を 使っ て 表示 され た 図形 の グラ デー ショ ン の 種類 を 変更 する 方 法 
に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 


<meta charset="utf-8"> 


<tttle>SqmpLe</t1tle> 
<SCrtpt src="]S/sample .]S"></SCrtDt> 
</head> 
<body> 
<h3> グ ラ デ ー シ ョ ン の 種類 を 変更 する </h3> 
<form> 


<tnput type="button" vatue=" 線 形 グ ラ デ ー シ ョ ン に する " id="grgdLtne"> 
<tnput type="button" vatue=" 円 形 グ ラ デ ー シ ョ ン に する " id="gradRadtal"> 
</formm> 
<svg wtdth="329" hetght="Z240"> 
<defs> 
<ltnearGradtent 1d="grad1"> 
<stop offset="19%" stop-Color="#9099ff" /> 
<stop offset="8 の %" stop-Color="#ff の 909 の" /> 
<stop offset="190%" stop-color="#ffbf90" /> 
</1itnearGradtent> 
<radialGradtent 1d="grad2"> 
<stop offset="10%" stop-color="# の 99990ff" /> 
<stop offset="8 の %" stop-color="#ff0909" /> 
<stop offset="190%" stop-Color="#ffbfT09" /> 
</radtalGradtent> 
</defs> 
<rect x="19" y="5" fil1="urt(#grad1)" width="399" hetght="229" /> 
</sVg> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.qddEventLtstener("1ogd" , functton()† 
// ボタ ン に イベ ント を 設定 
document . getEtementByIdC"gradLine") .addEventLtstener("clLtck" functton(){ 


// SVG の 最初 の rect 要 素 を 取得 
var svgRect = document .getElementsByTagName( "rect")[9] : 
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mW 王 ビ ビビ ロ TI ロロ N -2 ら 57 mw SVG の 図形 の グラ デー ショ ン の 種類 を 変更 する 


// 塗り に 線形 ゲラ デー ショ ン を 設定 た 表 | 
svgRect . setAttrtbute("f111" 。 "urt(grad1)"): 
}, faqtse): 


// ボタ ン に イベ ント を 設定 
documert.getELementById("grgdRgdto1l").qddEventListener("ctitck",。 functton(){ 
// SVG の 最初 の rect 要 素 を 取得 
Var svgRect = document.getELementsByTagName( "rect")[9]: 
// 澄 り に 円 形 グ ラ デ ー シ ョ ン を 設定 
svgRect . setAttrtbute("ftLL"。 "urt(#grad2)"): 
+, false): 
+,fqlse): 


ブラ ウザ で index.html を 表示 し 、 線形 グラ デー ショ ン に する ボタ ン を クリ ッ ク す る と 、 四角 形 
の 塗り が 直線 的 な ダラ デー ショ ン で 表示 され ます 。 





円 形 グ ラ デ ー シ ョ ン に する ボタ ン を クリ ッ ク す る と 、 四角 形 の 塗り が 円 状 の グラ デー ショ ン で 表 


人 ハハ ご / ど SBAUB)/SBAUB バ ) 還 こ 記 人 きこ ミ el| 
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還 ビビ ロイ T| 口 N-257 プ mw SVG の 図形 の グラ デー ショ ン の 種類 を 変更 する 


TE こ VG の 図形 の グラ デー ショ ン の 種類 を 変更 する に は 
図形 を 示す 要素 の 「fill」 属性 の 値 を 変更 する 


イン ライ ン SVG を 使っ て 描画 され た 図形 の グラ デー ショ ン の 種類 を 変更 する に は 、 


形 を 示す 要素 の 「 負 | 属 性 の 値 を 変更 し ます 。 SVG で は グラ デー ショ ン も 塗 り の 1 つと し 
て 処理 され ます 。 そこ で 、[ setAttribute () 」 メ ソ ッ ド を 使っ て 表示 し た い グ ラ デ ー シ ョ ン を 
示す 文字 列 で ある 「 "url(# 定 義 し た グラ デー ショ ン 名 ) "」 を |「 加 属性 に 設定 し ます 。 








人 ハハ G/5 SBAUB)/SBAUE() に きこ 4 ミト 


605 


Pa すす 
プチ rw 


* 電 
いな フェ ES 


ーー ュ 


So 本 AN 


トリ テア 


な そま sur 
も いて の と る 衝 「 


OU 
いま たべ OUT る 
J や mM 


二 
デュ rc 2 


「 まま 


FE 


ず 


0 
YA ト 
ょ 4 ミ ャ 

ゴム ・w イム 
ーー 


アナ 
tr キネ 


ォ 
ャ <。 サ が し 1 4 
まう 


! 
IFG 


2 
2 


KG が EdWT 9 て 1 RT OK ポ ゅ CN. 。 ? 
ha な 「 


CRE 放 


きき 
アー で 


莉 sw デ ァ w』 Mr ki 。 バ _- 机 ! こ ズ リプ "・ ィ 
に を で 


2 ふと デ る 


トッ vo がけ ん テ 4 才 内 1 








BIDSW ]W1H/OSDI ハ /OIDnV 記 EEWSM4sa 


608 


LIE9 』Chrome 』 Safari 5 | Firefox 4 Opera 11 | iOS4 | Android2 IWP_ 


EE。 1111Nー グ 5 向 
オー ディ オオ ブ ジ ェクト を 生成 する 


ここ で は 、 オー ディ オオ プ ジ ェ クト を 生成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<heqgd> 
<meta Charset="utf-8"> 
<tttte>SamDLe</t1t1e> 
<SCPtDt Src="]S/sample .]S"></scrtpt> 
</head> 
<body> 
<h1>HTMLS5 Audto</h1> 
<form> 
<tnput type="button" vatue=" 再 生 "> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . qddEventLtstener("1ogd" 。functton(){ 
var btn = document .getElLementsByTagName( "tnput")[9] : 
// ボタ ン に イベ ント を 割り 当て 
btn.addEventLtstener("clLick"。functton(){ 
// オー ディ オオ プ ブ ジ ェクト の 生成 と オー ディ オフ ァイル の 読み 込み 
var gudtoOb] = new Audto("mustc/sample .mp3"): 
// オー ディ オ を 再生 する 
audio0b] . plLay( ): 
+。fqtse): 
+。 folse): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 オー デイ オフ ァイル が 読み 込ま れ て 
再生 が 行わ れ ま す 。 


HIIMLS Andio 





m ビ ピロ TI 口 N-2 王 日 m オー ディ オオ プ ジ ェ クト を 生成 する 


mml 上 オー ディ オオ ブ ジ ェクト を 生成 する に は 「new Audio()」 を 使う 


HTML5 で オー ディ オ を 扱う に は 、 2 つの 方 法 が あり ます 。 1 つ は 、 HTML 文 書 内 に 書 
か れ た |「 audio」 要 素 に アク セス し 、 制 御 する 方 法 で す 。 も う 1 つ が 「new Audio() 」 を 使っ 
て 「 Audio」 オ ブ ジ ェクト を 生成 し 、 制御 する 方 法 で す 。 前 者 は DOM の 扱い に な る の で 、 
| document.getElementByIld() 」 な ど を 使っ て アク セス する こと が で きま す (356 ペ ー ジ 
参照 )。「new Audio() 」 の 場合 は 、 パラ メー タ を 指定 し な けれ ば オー ディ オオ ブ ジ ェクト 
が 生成 され 、 URL を 指定 し た 場合 は サウ ンド ファ イル と し て 読み 込ま れ ま す 。 

オー ディ イオ オブジェ クト は | audio」 要素 で も [new Audio() 」 で 生成 し て も 同じ な の で 、 
オー デイ オ 処 理 に 使用 で きる メソ ッ ド と プロ パテ ィ に 違い は あり ませ ん 。 


mal 紀和 に 間 苦 を 生成 する 他 の 方 法 


HTML5 で は 、 他 に も 音 を 生成 する | Web Audio API」| (Google Chrome/Safari 
6) 、| Audio Data API」 (Firefox) も あり ます 。 詳細 に つい て は 、 それ ぞ れ 、 次 の Web 
ペー ジ を 参照 し て くだ さい 。 な お 、 Web Audio API に つい て 、 848 一 856 ペ ー ジ で 解説 
し て いま す 。 
es Web Audio AFI 

https://dvcS.w3.0rg/hg/audio/raw-file/tip/webaudio/specification.html 
ws Audio Data AHI 
https://Wiki.mozilla.org/Audio_Data_AFI 
















miml 画 NN FirefOnx や OpDera で の 音声 の 再生 に つい て 


Firefox や Opera で は Ogg 形式 で な いと 、 オー ディ イオ が 再生 され ませ ん 。 本 書 の サン 


プル で は 、 MP3 形 式 の 音声 ファ イル を 使っ て いる た め 、 その まま で は オー ディ オ が 再生 
され ず 、 動作 の 確認 を 行う こと が で きま せん 。 Firefox や Opera で 動作 確認 を 行う 際 は 、 
別途 、 Ogg 形式 の オー ディ オ を 用 意 し 、 サン プル の コー ド を 適宜 、 書き 換え て くだ さい 。 





関連 項目 


@ VVeDb Audio で 音 を 鳴ら す 07 電流. ん あい が CN 着 が な る せま の 河和 S0 ば や 信 秋 が D.850 
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LIE 9 』Chrome 』 Safari 5 | Firefox 4 1 Opera11 | iOS4 1』 Android2 1 WP 


5 ら E(5 11UN- つ らら 


オー ディ オ を 再生 ・ 停 止 する 


ここ で は 、 オー ディ イオ を 再生 ・ 停 止 す る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttle>Samp Le</tttle> 
<SCrtDt Src="]S/SamplLe.]S "></scrtpt> 
</hegd> 
<body> 
<h1>HTML5 Audto</h1> 
<qud1O SrPc="muSs1c/sample.mp3" controls></qud1o> 
<form> 
<tnput type="button" vatue=" 再 生 "> 
<tnput type="button" vatue=" 停 止 "> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . gddEventListener("1oad" 。 functton(){ 
// オー ティ オ 要 素 を 読み 出す 
var qudto0b] = document.getEtementsByTagName( "audto") う [9]: 
// イベ ント を 割り 当て る ボタ ン 要 素 を 読み 出し 
var btn = document.getELementsByTagName("1nput"): 
btn[9] .qddEventListener("click"。 functton(){ 
// オー ディ オ を 再生 
audio0b] . plqy(): 
+, faqlse): 
btn[1] .qddEventLtstener("clLtck"。 functton(){ 
// オー ディ オ の 再生 を 停止 
qudtoO0b] . pause( ): 
+。fqlse): 
}, fatse): 
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還 ビビ ロ T| 口 N| - つ らら mw オー ディ オ を 再生 ・ 停 止 する 


ブラ ウザ で index.html を 表示 し 、 再生 ボタ ン を クリ ッ ク す る と 、 オー ディオ ファ イル が 読み 込ま 
れ て 再生 され ます 。 停止 ボタ ン を クリ ッ ク す る と 、 再生 が 停止 し ます 。 


オー ディ オ を 再生 する に は 「play()」 メ ソ ッ ド 、 
品 上 有人 停 l[ す る に は 「pause()」 メ ソ ッ ド を 使う 


HTML5 Audio を 再生 する に は 、 オー ディ イオ オブジェ クト の 「play() 」 メ ソ ッ ド を 使い ま 
す 。「play() 」 メ ソノ ッ ド 実 行 時 に オー ディ オフ ァイル が 読み 込ま れ て いな い 場 合 で も エラ ー 
に は な ら ず 、 再生 可能 に な っ た 段階 で 再生 が 行わ れ ま す 。 

オー ディ オ を 停止 する に は 、「pause() 」 メ ノッ ド を 使い ます 。「pause 0 」 メ ソ ッ ド は 、 再 
生 を 停止 する だ け で 巻き 戻し 処理 な ど は 行い ませ ん 。 この た め 、| pause (0 」 メ ソ ッ ド 実行 
後に 再度 、「play() 」 メ ノッ ド を 実行 する と 、 停止 し た と ころ か ら 再 生 が 開始 され ます 。 


関連 項目 ゅ 








e オー ディ オ の 再生 時 の イベ ント を 取得 する ……………… ド im ueaccxussr 皇 近 00 す 8 2 p.631 
e オー ディ オ の 再生 が 終了 し た 際 の イベ ント を 取得 する ………… の imemrmenrrrrrrn p.633 
e Web Audio で 音 を 鳴ら す … tion p.850 
@ Web Audio で ファ イル を 読み 込ん で 演奏 する や : の 大 あ る 征 あ めも を な が れず ゃ も る る ゃ る を を めも る の すもも で な さる D.85 ど 
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LIE9 』Chrome 』 Safari 5 | Firefox 4 』 Opera 11 1 iOS4 1 Android2 1 WP 」 


=1 コ mglmlN ン 1=1 ョ 
再生 時 間 を 取得 ・ 設 定 する 


ここ で は 、 オー デイ オ で 再生 時 間 を 取得 ・ 設 定 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<retq Charset="utf-8"> 
<tttle>SampLe</ も tt て 1e> 
<SCP1Dt src="]s/sample.]S"></scrtpt> 
</head> 
<body> 
<h1>HTML5 Audio</h1> 
<oud1O Src="mus1c/sample.mp3" controls></qud1to> 
<foOrW> 
<tnput type="text" value="2.5" 1d="startTitme"> 
<tnput type="button" value=" 指 定 し た 時 間 か ら 再 生 "> 
</form> 
< く OU て Du キ 上 ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventListener("1ogd", functton(){ 
// オー ディ オ 要 素 を 読み 出す 
Var' gudto0Ob] = document.getEtementsByTagName( "qudio")[9@]: 
// イベ ント を 割り 当て る ボタ ン 要 素 を 読み 出し 
var btn = document.getElLementsByTagName( "tnput"): 
btn[1] .gddEventLitstener(C"clttck"。functton(){ 
// 設定 時 間 を 読み 出し 
Var ttme = document.getElLementByIdC"startTtme ") .value : 
// 時 間 を 設定 
qudto0b] . currentTime = ttme: 
// オー ディ オ を 再生 
qud1o0b] .play( ): 
+, folse): 
// オー ディ オ に イベ ント を 割り 当て 
qudto0b] . qddEventLtstener( "ttmeupdate",。 functton(){ 





glDSW ]WIH/OpI ハ /olpny 証 証 7 


var ele = document.getElLementsByTagName( "output")[9] : 
// 再生 時 間 を 表示 
ele.innerHTML = "再生 時 間 :"+thts.currentTime: 
}, fqlse): 
}, fqlse): 
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mm 王 ビ ピロ T| 口 NN-26 ロ wm 再生 時 間 を 取得 ・ 設 定 する 


ブラ ウザ で index.html を 表示 し 、 開始 時 間 を 入力 後 、 再生 ボタ ン を クリ ッ ク す る と 、 オー デイ 
オフ ァイル が 指定 し た 時 間 か ら 再 生 さ れ ま す 。 また 、 再生 中 に は 、 画面 に 再生 時 間 が 表示 る 
れ ま す 。 


再生 時 間 : 3. 3097053050994873 





現在 の 再生 時 間 を 取得 する に は 、 オー ディ イオ オブ ジェ クト の | currentTime」 プ ロ パ 
ティ を 参照 し ます 。「currentTime」 プロパ ティ の 内 容 は 再生 きれ て いる 時 間 で あり 、 
[5963」 の よう に ミリ 秒 を 含む 値 に な り ま す 。 

指定 し た 時 間 か ら 再 生 する 場合 に は 「currentTime」 プ ロ パ ティ に 、 再生 を 開始 し 
い 時 間 を 設定 し ます 。 な お 、 再生 中 で も 、 停止 中 で も 、 currentTime」 プ ロ パ ティ に 衝 
を 設定 する こと が で きま す 。 

Windows Phone(7.5) で は オー ディ オ の 再生 が ユー ザー に よっ て 行わ れ て いな い 場 

RS 読み 出す こと は で きま す が 、 設定 する こと は で きま 

ん 。 一 度 、 オーデ ィ イオ を 再生 し た 後 で あれ ば 、「currentTime」 プ ロ パ ティ に 値 を 設定 

し 。 1 
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LIE9 上 Chrome 上 Safari 5 | Firefox 4 1 Opera11 | iOS4 I Android2 WP 」 


所 も 1 いのら 1 
オー ディ オ の 長 さ を 調べ る 


ここ で は 、 オー ディ イオ の 長 さ を 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 


<tttle>Sqample</t1tt1e> 








<SCP1Dt src="]S/sample .]S "></sCrtpt> 

</heoad> 

<body> 
<h1>HTML5 Audto</h1> 
<qud1O src="muStc/sample.mp3" controls></qud1o> 
<form> 

<tnput type="button" vglue=" 長 さ を 調べ る "> 

</forr> 
<OUtDut></OutDut> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oad" 。 functionC){ 





var btn = document.getElementsByTagName( "tnput")[9] : 
// オー ティ オオ プ ジ ェ クト を 生成 
Var qudtoOb] = document.getElementsByTagName( "audio")[9] : 
// ボタ ン に イベ ント を 割り 当て 
btn .qddEventLtstener("cltck",。 functton(){ 
// オー ディ オフ ァイル の 長 さ ( 尺 ) を 変数 に 代入 
Var Sec = qudto0b] . duratton: 
document .getEtementsByTagName( "output")[9] .1nnerHTML = sec+" 秒 ": 
+。 false): 
が false): 


和 m 呈 ビ ロ T| 口 N - ら 呈 ] mw オー ディ オ の 長 さ を 調べ る 


プラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 オー ディ イオ の 長 さ が 表示 され ます 。 


| HIMELS Audio 


23 483999252319336 秒 


雪上 オー ディ オ の 長 さ を 取得 する に は 「duration] プロ バテ ィ を 使う 


オー ディ オ の 長き さ ( 尺 ) は 、 オ ー デ イオ オブジェ クト の 「duration]」 プロパ ティ を 参照 する 
こと で 取得 で きま す 。「duration」 プロパ ティ は 、 長 さ を 秒 数 で 返し ます 。 

な お 、 オー ディ オデ ー タ が 読み 込ま れ て いな い 状 態 で | duration]」 プ ロ パ ティ を 読み 出 
す と 、「NaN」 を 返し ます 。 
スマ ー ト フォ ン で は 一 度 、 再生 し た 後 で な いと 、 長 さ を 取得 で き な い 場合 が あり ます 。 
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LIE9 』Chrome ! Safari 5 | Firefox 4 | Opera11 1 iOS4 | Android2 1 WP_ 


=1=MMImIN ン 1= レ 
指定 され た オー ディ オ 形 式 が 
再生 可能 か どう か 調べ る 

ここ で は 、 指 定 さ れ た オー ディ オ 形 式 が 再生 可能 か どう か 調べ る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<retq charset="utf-8"> 
<tttle>Sompte</ttt1e> 
<SCrtDpt src="]S/sqmple.]S"></scrtpt> 
</heqd> 
<body> 
<h1>HTML5 Audto</h1> 
<form> 
<tnput type="text" vaqlue="qudito/wav" 1d="mtype"><br> 
<tnput type="button" vaqtue=" 再 生 可能 か 調べ る "> 
</form> 
<OUtDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventLtstener("1oad"。 functton(){ 





var ele = document .getElementsByTagName( "output")[9] : 
// オー ディ オオ プ ブ ジ ェクト を 生成 する 
var qudto0b] = new Audto(): 
// イベ ント を 割り 当て る ボタ ン 要 素 を 読み 出し 
var btn = document.getElementsByTagName( "1nput")[1]: 
btn .qddEventLtstener("cttck",。functton(){ 

// MIME Type を 読み 出し 

Var mt = document.getElementById( "mtype").vqlue: 

// 再生 可能 か どう か 調べ る 

var result = oudto0b] .canPlayType(mt): 

// 結果 を 表示 

ele.innerHTML = mt+" 形 式 は 再生 で きま せん ": 

tf Cresutt === "maybe"){ 

elte.tnnerHTML = mt+" 形 式 は 再生 可能 で す ": 





IDS ITH/OSDI 人 W ハ /OIDIV に EEM4 ミ ド 


} 
1f (result === "probabty"){ 
ete.tnnerHTML = mt+" 形 式 は 多分 、 再生 で きま す ": 
} 
}, faqlse): 
}。 fgqlse): 
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mg 呈 ビ ロイ | 口 N-262 mw 指定 され た オー ディ オ 形 式 が 再生 可能 か どう か 調べ る 


ブラ ウザ で index.html を 表示 し 、 再生 で きる か どう か 調べ た い オ ー デ ィ イオ ファ イル の MIME 
タイ プ を 入力 後 、 ボ タン を クリ ッ ク す る と 、 結果 が 表示 され ます 。 


HIIMLS Audio 





audio/mp3 


audioymp3 形 式 は 再生 可能 で す 





再生 で き な い 場合 は 、 次 の よう に 表示 され ます 。 


再生 可能 な オー ディ オフ ァイル の 形式 を 調べ る に は 
「canPlayType()」 メ ソ ッ ド を 使う 

HTML5 Audio で は 、 特定 の ファ イル 形式 が 再生 で きる か どう か 調べ る こと が で きま 
す 。 再生 可能 か どう か 調べ る に は 、 オー デイ オオ ブ ジ ェクト の | canPlayType( 」 メ ソ ッ ド 
を 使い ます 。「canPlayType() 」 メ ノッ ド の パラ メー タ に 、 調べ る ファ イル の MIME タ イプ 
を 指定 し ます 。 

再生 で きる 場合 に は 「'maybe'」 の 文字 を 、 再生 で きる か も し れ な い 場 合 に は 
「"probably'」 の 文字 を 返し ます 。 再生 で き な い 場合 は 、 空 文字 が 返さ れ ま す 。 

な お 、 主 な オー ディ イオ 形 式 の MIME タ イプ は 、 次 の よう に な り ま す 。 
説明 
MP3 形 


[ 式 

Ogg 形式 

WAVE 形 式 
[ 式 


ロロ NEP ロ INT 


AIFF 形 
MIDI 形 式 


audio/midi MIDI 形 式 











BID9M ILH/OSDI 八 /OID「IV EETE ニ MMS 


617 





lpSN ]NLH/OSpIA/olpny 計 還 時 人 27s 


618 


LIE9 』Chrome 1 Safari 5 | Firefox 4 1 Opera 11 1 iOS 4 1 Android2 1 WP_ 


Sb TIUN-2 ら 8 


オー ディ オフ ァイル の 読み 込み に 応じ て 
受 化 する 通信 状態 を 調べ る 


ここ で は 、 オー デイ オフ ァイル の 読み 込み に 応じ て 変化 する 通信 状態 を 調べ る 方 法 に つい 
て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttle>SqmpLe</t1t1e> 
<SCP1Dt src="]S/sqmple.]S "></scrtpt> 
</heqd> 
<body> 
<h1>HTML5 Audto</h1> 
<qud1o Src="mustc/sample .mp3" controls></qudio> 
<for> 
<tnput type="button" vaqtue=" 通 信 状 況 を 調べ る "> 
</form> 
<OUtDut></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.aqddEventListener("1ogd"。 functton(){} 
var ele = document .getElementsByTagName( "output")[9] : 
// オー ディ オオ ブ ジ ェクト を 生成 する 
var qudto0Ob] = document.getEtementsByTagName( "gudto")[9]: 
// 通信 状態 を 格納 し た 配列 を 用 意 
var nstat =["EMPTY"。 "TIDLE"。 "LOADING" "NO0_SOURCE"]: 
var rstot = ["NOTHING" "METADATA" "CURRENT_DATA" "FUTURE_DATA" "ENOUGH_DATA"] : 
// イベ ント を 割り 当て る ボタ ン 要 素 を 読み 出し 
var btn = documernt.getEtementsByTagName("1nput")[9] : 
btn .gddEventListener("clitck"。function(){ 
// ネッ トワ ー ク 状態 を 読み 出し 
var S = qudtoO0b] . networkStqte: 
Var rs = qudtoO0b] . readyState: 
// 結果 を 表示 
ele.tnnerHTML = "networkStoate: "+nstat[s] : 
ele.1nnerHTML += "<br>readyState: "+rstat[rs] : 
}, false): 
}, faglse): 


mm ビ じ TI ロロ NN -2 ら ヨコ mw オー ディ オフ ァイル の 読み 込み に 応じ て 変化 する 通信 状態 を 調べ る 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 現在 の 通信 状態 が 画面 に 表示 さ 
れ ま す 。 


readyState:ENOUGH_DATA 


si 紹 sm 画 通信 状態 を 調べ る に は 「networkState」 プロ バテ ィ を 使う 


オー ディ オフ ァイル の 読み 込み が 行わ れる と 、 通信 状態 が 変化 し ます 。 この 通信 状態 
が どの よう に な っ て いる か は 、 オー デイ オオ ブ ジ ェクト の 「networkState」 プロ パテ ィ を 参 
昭 し ます 。「networkState」 プロパ ティ に は 、 次 の 表 に 示す 値 が 入っ て いま す 。 


ネッ トワ ー ク は 空っぽ 


また 、「networkState」 プ ロ パ ティ 以外 に も 「readyState」 プロパ ティ で も 状況 を 取 待 
する こと が で きま す 。「readyState」 プロパ ティ に は 、 次 の 表 に 示す 値 が 入っ て いま す 。 


誠に 所 
| 1 | ァ イ ドル 中 


スム ー ズ に 再生 で きる 充分 な デー タ を ダウ ン ロ ー ド 


Windows Phone の 場合 の 「networkState」 プロ バ パティ と 
「readyState」 プロ バテ ィ 


Windows Phone で は サン プル を 実行 する と 、 デー タ の 読み 込み 状態 に か か わら ず 、 
「networkState」 プロ パテ ィ は 「EMPTY」、「readyState」 プ ロ パ ティ は |「 NOTHING」 
を 返し ます 。 


ピロ LUNMN 
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LIE9 』Chrome 1 Safari 5 | Firefox 4 Opera 11 1 iOS4 Android2 1WP」 


BEUTIHN-26 オ 


オー デ ティオ の ボリ ュー ム を 設定 ・ ミ ュー ト に する 








ここ で は 、 オー デイ オ の ボリ ュー ム を 設定 ・ ミ ュー ト す る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<rmeta charset="utf-8"> 
<tttle>SqmpLe</t1t1e> 
<SCr1Dt src="]S/sqmplLe.]S "></scrtpt> 
</head> 
<body> 
<h1>HTML5 Audio</h1> 
<qudtO Src="WuS1c/sample.mp3" controts 1oop></qudto> 
<formW> 
<1nput type="text" vaqlue=" の .5" 1d="vol "><br> 
<tnput type="button" vatue=" ボ リュ ー ム を 設定 する "><br> 
<tnput type="button" vaqtue=" ボ リュ ー ム を 読み 出す "><br> 
<tnput type="button" vqtue=" ミ ュー ト ( ク リッ ク で 切り 替え ) "> 
</form> 
< く OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oad"。 functton(){ 





var ele = document.getElementsByTagName( "output")[9]: 
// オー ディ オオ プ ジ ェ クト を 生成 する 
var gudto0b] = document.getELementsByTagName( "qudio")[9] : 
// イベ ント を 割り 当て る ボタ ン 要 素 を 読み 出し 
Var' btn = document .getEtLementsByTqgName( "1nput"): 
// ボリ ュー ム 設 定 を 行う ボタ ン に イベ ント を 設定 
btn[1] .qddEventListener("cttck",。functton(){ 
// 設定 する ボリ ュー ム 値 を 読み 出し 
Vogr n = document.getEtementBy1d("vo1") .vgtue : 
// オー ディ オ の ボリ ュー ム と し て 設定 
qudto0b] .volume = n: 
// 設定 し た こと を 示す メッ セー ジ を 表示 
ele.innerHTML = "ボリ ュー ム を 設定 し まし た ": 
} す 。 faqlse): 
// ボリ ュー ム を 読み 出す ボタ ン に イベ ント を 設定 
btn[Z2] .qddEventListenerC"cLtck"。functton(){ 
// 現在 の ボリ ュー ム 値 を 読み 出し 
Var n = qudto0b] . volume : K4 
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還 ビビ ロ T| 口 N!-2 ら 4 mw オー ディ オ の ボリ ュー ム を 設定 ・ ミ ュー ト に する 


// 設定 し た こと を 示す メッ セー ジ を 表示 4 
ele.tnnerHTML = "現在 の ボリ ュー ム :"+n: 
+, fatse): 


// ミュ ー ト を 設定 する ボタ ン に イベ ント を 設定 

btn[3] .addEventLtstener("cltck"。functton(){ 
// 現在 の ミュ ー ト 状態 を 読み 出し 値 を 反転 する 
var flag = gudtoOb] .muted = !qudtoOb] . muted: 
// 設定 し た こと を 示す メッ セー ジ を 表示 
ele.innerHTML = "ミュ ー ト 状態 :+flag: 

+, fatse): 

}, false): 


ブラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド に 設定 し た い ボ リュ ー ム 値 (「00」- 
「10」) を 入力 後 、「 ボ リュ ー ム を 設定 する 」 ボ タン を クリ ッ ク す る と 、 ボリ ュー ム が 設定 され ます 。 





BIDS 届 1]TH/O9DI 八 /OID「1V 放 に に E き ニ 4 





「 ミ ュー ト ( ク リッ ク で 切り 替え ) 」 ボ タン は 、 ク リッ ク す る た びに 、 ミ ュー ト の ON/OFF が 切り 替 わ 
り ま す 。 
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EE ビ TIHN-2 ら オイ オー ディ オ の ボリ ュー ム を 設定 ・ ミ ュー ト に する 





開き ).1 


ボリューム を 設定 する に は 「volume」 プロ パテ ィ 、 
語 NM 識 ミュ コート する に は 「muted」 プロ バテ ィ を 使う 


HTMLS5 Audio で ボリ ュー ム ( 音 量 ) を 設定 する に は 、 オ ー デ イオ オブ ジェ クト の [| volume」 
プロ パテ ィ に 値 を 代 人 し ます 。 設定 で きる 値 は 、「00」-「10」 の 範囲 に な り ま す 。 この 範 
囲 を 超え た 場合 、 自動 的 に 値 を 調整 し て 設定 され る 場合 も あり ます (負数 の 場合 は 設定 
され な い 場 合 が ある )。 また 、 現在 の ボリ ュー ム を 読み 出す に は 、 オー デイ オオ プ ジ ェ クト の 
| volume」 プ ロ パ ティ を 参照 し ます 。 

ボリ ュー ム の 調整 で は な く 、 一 時 的 に 音 を 消す (ミュ ー ト / 消 音 ) 場 合 に は 、 オー ディ オ 
オプ ジェ クト の | muted」 プ ロ パ ティ に 「true」 を 設定 し ます 。 再度 、 音 を 出す よう に する に 
は | false」 を 設定 し ます 。 

な お 、 ボリ ュー ム 関 係 は 、 スマ ー ト フォ ン で は 読み 出す こと は で き て も 、 設定 する こと が 
で き な い 場合 が あり ます 。 その 際 、 設定 し て も エラ ー は 発生 し ませ ん 。 


関連 項目 ょ ゅ 


ぁ オー ディ オ の ボリ ュー ム が 変更 され た 際 の イベ ント を 取得 する …… つ tt※ ぬ …ー…… ド ーーー… p.635 
の Web AudiOo で ボリ ュー ム を 指定 する の ので で も エ スッ イト すい で リュ で ササ リヤ チー リュ イツ ツヤ プン 9 D.855 





LIE9 1 Chrome Safari 5 」 Firefox 4 1 Opera11 OS4 1 Android2 』WP 


思 二 LN- 有 2 白 各 


オー ディ オ の コン トロ ー ラ ー の 表示 / 非 表示 を 
設定 する 


ここ で は 、 オーディオ の コン トロ ー ラ ー の 表示 / 非 表示 を 設定 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="utf-8"> 








<tttle>Sampte</t1tle> 
<scrtpt src="]S/sample .]S "></SsCPtDt> 
</hegd> 
<body> 
<h1>HTML5 Audto</h1> 
<qudto src="mustc/sampte.mp3" controls></qud10> 
<formW> 
<input type="button" vaqlue=" 表 示す る "> 
<tnput type="button" vglue=" 非 表示 に する "> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


window .addEventListener("1oad" 。 functton(){ 





var btn = document.getElementsByTagName( "1nput"): 
// オー ディ オオ プ ジ ェ クト を 読み 出し 
var oudio0b] = document.getEtementsByTagName( "audio")[9]: 
// ボタ ン に イベ ント を 割り 当て 
btn[9] .addEventLtstener("cLtck"。 functton(){ 
// コン トロ ー ラ ー を 表示 する 
audio0b] .cControls = true: 
+, faqlse): 
// ボタ ン に イベ ント を 割り 当て 
btn[1] .qddEventListener("cltck"。 functton()+ 
// コン トロ ー ラ ー を 非 表 示 に する 
qudto0b] .controls = false: 
}, false): 
+, false): 


BIDS ITH/OSDI 八 /OID「IV に に EE に 4 
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m 王 ビ ビビ TI ロ N-265 mw オー ディ オ の コン トロ ー ラ ー の 表示 / 非 表示 を 設定 する 


ブラ ウザ で index.html を 表示 する と 、 最初 の 状態 で は コン トロ ー ラ ー は 表示 され て いま す 。 





| 非 表 示 に する 」 ボ タン を クリ ッ ク す る と 、 コ ント ロー ラー が 消え ます 。 な お 、 プ ラウ ザ に よっ て は 、 
| auido」 要素 の 梓 が 残る 場合 が あり ます 。 


オー ディ オ の コン トロ ー ラ ー の 表示 制御 を 行う に は 
「controlS」 プロ パテ ィ を 使う 

| audio」 要 素 で は 、 ユー ザー に オー ディ イオ 操 作 さ せる 際 に コン トロ ー ラ ー を 表示 する た め 
の | controls」 属 性 が 用 意 き され て いま す 。 スマ ー ト フォ ン や タブ レッ ト に よっ て は 、「controls」 
属性 を 指定 し な いと 再生 する こと が で き な い (表示 され な い ) 場合 が あり ます 。 また 、 コン ト 
ロー ラー は 表示 する 必要 が ある が 、 再生 中 は 消し て お きた い 場 合 も あり ます 。 

コン トロ ー ラ ー の 表示 制御 は 、 オ ー デ ィ イオ オブ ジェ クト の 「controls」 プロパ ティ に [true 」、 
また は 、| false」 を 代 人 人 する こと で 行い ます 。「true」 に する と コン トロ ー ラ ー が 表示 され 、 
| false」 に する と コン トロ ー ラ ー は 非 表 示 に な り ま す 。 





NE ビ PINT 





PID9W ITH/OSDI ハ /OIDTIV EE まき EL4 ュ は 
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LIE9 』 Chrome 1 Safari 5 | Firefox 4 1 Opera 11 1! OS4 1 Android2 』WP_ 


世 攻 5 11HN- の つら 6 
オー ディ オデ ー タ を 読み 込む 
ここ で は 、 オー デイ オデ ー タ を 読み 込む 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) ド 


<!DOCTYPE html> 





<html> 用 
<head> eo 
<meta charset="utf-8"> 同 
<tttle>SampLe</t1tle> 計 
<scrtpt src="]s/sample.]S"></scrtpt> | ロ 
</heqd> M 
<body> 本 
<h1>HTML5 Audio</h1> ド 
<for> I ロ 9 
<input type="button" value=" 読 み 込み "> 了 
<tnput type="button" value=" 再 生 "> 了 
</form> ' | 
</body> ー 


1 
2 


JavaScript の コー ド (sample.js) I ロ 


witndow.qddEventListener("1oad"。 functton(){ 
var btn = document .getEtLementsByTqgName("1nput") う : 
// オー ディ オオ プ ジ ェ クト を 生成 
var qudio0b] = new Audto(): 
// ボタ ン に イベ ント を 割り 当て 
btn[9] .qddEventLtstener("click", functton()+ 
// オー ディ オフ ァイル を 読み 込み 
qudio0b].src = "mustc/sample.mWDp3": 
}, faqtse): 
// ボタ ン に イベ ント を 割り 当て 
btn[1] .qddEventLtstener("cltck"。functton()+ 
// オー ディ オ を 再生 する 
qudto0b〕 .ptoy(): 
+, false): 
}, false): 





glp9 ]NIH/OeDIA/Oipnv 認 還 ESE 
= 1 
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EID9M ITH/OSDI 人 ハ /OIDTIV に EPSE4E 
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m 王 ビ ビ ピ T エ 1 ロロ NN - つ 6 ら 6 mw オー ディ オデ ー タ を 読み 込む 


プラ ウザ で index.html を 表示 し 、| 読み 込み 」 ボ タン を クリ ッ ク す る と 、 オー デイ オフ ァイル が 読 
み 込 まれ ます 。 オー デイ オフ ァイル が 読み 込ま れ て いな い 時 点 で は 「 再生 」 ボ タン を クリ ッ ク し て 
ゃ 再生 され ませ ん 。 | 読み 込み 」 ボ タン を クリ ッ ク し た 後 で あれ ば 、 オー ディ オ は 再生 きれ ます 。 


IWAmII に EE 








ゲー ム な ど で は 、 状況 に 合わ せ て オー ディ オフ ァイル を 再生 し た い 場 合 が あり ます 。 こ 
の よう な 場合 、 オー デイ オオ プ ブ ジ ェクト の 「src」 プロパ ティ に 再生 し た いい オーディオ ファ イル 
の URL を 指定 する こと で 、 動 的 に 再生 さき れる オー ディ オ を 変え ん る こと が で きま す 。 






ES 
@ WVeb AudiO で ファ イル を 読み 込ん で 演奏 する 休演: 人 あめ 富江 当 あれ D.85 





LIE9 1 Chrome | Safari 5 | Firefox 4 1 Opera 11 1 iOS4 』 Android2 1WP_ 


ED TIHN- ど 巳 ソ 
オー ディ オ の 再生 状態 を 調べ る 


ここ で は 、 オー ディ オ の 再生 状態 を 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttte>SampLe</ て tt e> 
<scrtpt src="]Ss/sqmple .]S "></SCrtDt> 
</head> 
<body> 
<h1>HTML5 Audto</h1> 
<qudio src="mustc/sample .mp3" controls Loop></qud10o> 
<br> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window. addEventLtstener("1ogd" 。 functton()+ 
// オー ディ オ 要 素 を 読み 出す 
var qudio0b] = documernt .getEtementsByTagName("audto" う [9] : 
// タイ マー を 使っ て オー ディ オ の 状態 を 監視 する 
setTimeout(functton(){ 
var ele = document.getEtementsByTagName( "output")[ の ] : 
// 再生 速度 を 表示 
ele.innerHTML = "playbackRate : "+aqudto0b] .pLaybackRate: 
// 一 時 停止 状態 を 表示 
ele.1nnerHTML += "<br>paused: "+qudto0b] . DauSed: 
// 再生 終了 状態 を 表示 
ele.tnnerHTML += "<br>ended: "+qudto0b] . ended: 
// 自動 再生 状態 を 表示 
ele.tnnerHTML += "<br>qutoplay : "+audto0b] . autoploy: 
// ルー プ ( 繰 り 返 し 再生 ) 状 態 を 表示 
ele.tnnerHTML += "<br>toop: "+qudto0b] . LooD: 
// タイ マー 処理 を 継続 
setTtmeout(aqrguments .catlee, 259): 
}, 259): 
}, false): 





IDB ILH/OSDI 八 /OID「IV 作 こ に 4 ェ 
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BIDSW_IWTH/OSDI ハ /OIDTV に IE に 4 ェ 
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mm 王 ビ ピロ TI ロト | - つ らら プ mw オー ディ オ の 再生 状態 を 調べ る 


プラ ウザ で index.html を 表示 する と 、 オー ディ イオ の 状態 が コン トロ ー ラ ー の 下 に 表示 され ます 。 





| HTMLS Audio 


PlaybackRate: 1 
Paused: true 
ended: false 
autoplay: false 
loop: truc 


オー ディ オ を 再生 する と 、 プロ パテ ィ の 状態 が 変化 し ます 。 










オー ディ オ の 状態 を 取得 する に は 
「currentTime」 プロ パテ ィ や 「paused」 プロ パテ ィ な ど を 使う 


HTML5 Audio で は 、 さま ざま な プロ パテ ィ が あり ます 。 その 中 で 再生 状態 を 示す プロ 
パテ イィ イ は 次 の 表 の よう に な り ま す 。 プロ パテ ィ は 、 ど の プラ ウザ で も 読み 出す こと が で きま す 。 


ド バタ 間 間 間 EECHENEMGN 00C2002RHES 
現在 の 再生 時 間 ( 再 生 ヘッ ド の 位置 ) 


に WImII に 折 









停止 し て いる か どう か 。 停止 し て いれ ば 「true」、 再生 時 は [false 
再生 速度 (等 倍速 だ と 「1.0」、 2 倍速 な ら 「2.0]) 
再生 が 終了 し て いる か 。 終了 し た ら 「true」 、 そ う で な けれ ば 「false」 


ゝ ど デニ \。 見 合 0 ュ 二 な いい 提 
邊 再生 する か どう 2 自動 再生 する 場合 は 「true | 、 そう で な い 場 


繰り 返し ループ ) 再生 する か どう か 。 「true」 なら 繰 り 返し 、 [false | 
な ら 繰 り 返 さ な い 。 た だ し 、 Firefox で は loop が 機能 し な い 







LIE9 Chrome Safari 5 」 


=1 ゴ mglmlNB ン 1=1= 
オー ディ オ の 再生 速度 を 変更 する 


ここ で は 、 オー ディ オ の 再生 速度 を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta Charset="utf-8"> 
<tttte>SompLe</tttle> 
<SCrtDt Src="]S/Sample .]S"></SCrtDt> 
</heod> 
<body> 
<h1>HTML5 Audto</h1> 
<aqudto src="mustc/saqmple.mp3" Controls></qud10> 
<form> 
<input type="button" vatue="1 倍 速 "> 
<tnput type="button" vatue="2 倍 速 "> 
</formW> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow . qaddEventLtstener("1oad" 。 functton(){ 





var btn = documert.getELementsByTagName( "1nput"): 
// オー ディ オオ プ ジ ェ クト を 生成 
var qudio0b] = document.getEtementsByTagName( "audto")[9] : 
// ボタ ン に イベ ント を 割り 当て 
btn[9] .qddEventLtstener("clLick" functton()+1 
// 1 倍速 で 再生 する 
qudto0b] .pLaybockRate = 1.0: 
+ false): 
// ボタ ン に イベ ント を 割り 当て 
btn[1] .qddEventListenerC"cLtck"。functton()+ 
// 2 倍速 で 再生 する 
qudto0b] .pLaoybackRate = Z.0: 
}, false): 
}, false): 


BIDSI ILH/OSDI 八 /OID「IV に ここ 
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還 ビビ ピピ TI ロト NI-2 つ 日 m オー ディ オ の 再生 速度 を 変更 する 


プラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 再生 速度 が 変更 され ます 。 


⑮ Sample 
、 じ 昌 昌 昌 


HTML5 Audio 









mml ド 邊 月 生 速 度 を 変更 する に は 「playbackRate」 プロ パテ ィ を 使う 


IE9 以 降 や Google Chrome、 Safari で は 、 オー ディ オ の 再生 速度 を 変更 する こと が 
で きま す 。 この 場合 、 オー ディ オオ ブ ジ ェクト の 「playbackRate」 プロ パテ ィ に 再生 速度 
の 倍率 を 指定 し ます 。「1.0]」 で あれ ば 等 倍速 に 、「0.5] な ら 半 分 の 速度 (スロ ー 再 生 ) 、 
12.0」 な ら 倍速 再生 に な り ま す 。 あま り 大 きい 数 値 や 小さ い 数 値 を 指定 する と 、 指定 し た 
通り の 速度 で 再生 され な いこ と が あり ます 。 IE9 の 場合 、「playbackRate 」 プロ パテ ィ に 
値 を 設定 し て か ら 実際 に 反映 され る まで に 数 秒 か か る こと も あり ます 。 また 、 IE9 で は オー 
ディ オ が ルー プ 再 生 さ れ て いる 場合 、 オー ディ オ の 最初 に 戻る と 、「playbackRate」 プ ロ 
パテ ィ に 設定 し た 値 は 反映 され ず デ フォ ルト 値 に 戻り ます 。 

デフ ォ ル ト の 再生 速度 を 設定 する 場合 に は 、「defaultPlaybackRate」 プロ パテ ィ に 再 
生 速 度 の 倍率 を 指定 し ます 。「defaultPlaybackRate」 プロ パテ ィ を 設定 し て お け ば 、 
IE9 で も ルー プ 再 生 で 最初 に 戻っ た と き に 設定 し た 速度 で 映像 が 再生 され ます 。 

な お 、 未 対 応 の ブラ ウザ や スマ ー ト フォ ン (iOS/Android/Windows Phone) に 設定 
し た 場合 は エラ ー に は な ら ず 、 再生 速度 も 変化 し ませ ん 。 













BIDS ]W1H/OSDI ハ /OIDny EEEN4SE 
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LIE9 | Chrome Safari 5 | Firefox 4 1 Opera 11 1 iO54 」 Android 2 !WP_ 





=1 ゴ lllmlNB ン = に 
オー ディ オ の 再生 時 の イベ ント を 取得 する 


ここ で は 、 オー ディ イオ の 再生 時 の イベ ント を 取得 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<title>SampLe</tttle> 
<scrtpt src="]S/saqmple.]S"></SCPtPt> 
</hegd> 
<body> 
<h1>HTML5 Audto</h1> 
<aqud1o Src="mus1c/sample.mp3" controlLs></qud10> 
<br> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.addEventLtstener("1oad" 。 functton()1 
// オー ディ オ 要 素 を 読み 出す 
var oudto0b] = document .getELementsByTagName("audto")[9] : 
// オー ディ オ に イベ ント リス ナー を 設定 
gudto0b] .qddEventLtstener("ttmeupdate", functton()+ 





var ete = document.getEtLementsByTagName( "output")[ の ] : 
// 再生 時 間 を 表示 
ele.tnnerHTML = "再生 時 間 :"+thts .currentTime: 
+。 false): 
+, false): 


ブラ ウザ で index.html を 表示 し 、 オー ディ オ を 再生 する と 、 コン トロ ー ラ ー の 下 に 再生 時 間 
が 表示 され ます 。 ま た 、 再 生 し て いな い 状 態 で も 、 コ ント ロー ラー 上 の スラ イダ ー を ドラ ッ グ する と 、 
再生 時 間 が 表示 され ます 。 


IDSA ITH/OSDI ハ /OID「1V に に EEE 





631 


ms ヒビ TIHN-2 ら 69 mw オー ディ オ の 再生 時 の イベ ント を 取得 する 


オー ディ オ が 再生 され た 際 に 処理 を 設定 する に は 


1 [timeupdate」 イベ ント を 使う 


HTMLS Audio で は 、 現在 の 再生 時 間 を 示す 「currentTime 」 プ ロ パ ティ の 値 が 変 
化し た 場合 に 、「 timeupdate」 イ ベン ト が 発生 し ます 。「play () 」 メ ノッ ド を 使っ た り 、 コ ント 
ロー ラー で 再生 し た り し た 際 に 発生 する の は も ちろ ん 、 コン トロ ー ラ ー で 再生 時 間 を 示す 
スラ イダ ー を ドラ ッ グ し た 場合 に も 「timeupdate」 イ ベン ト は 発生 し ます 。 


| tmeupdate」 イ ベン ト の 発生 間隔 は 、 プラ ウザ や 動作 環境 (0S や バー ジョ ン ) に よっ 
て 玩 な り ま す 。 Firefox の よう に 頻繁 に 発生 する ブラ ウザ も あれ ば 、 Safari の よう に 1 秒間 
に 数 回 し か 発生 し な い ブ ラウ ザ も あり ます 。 

より 短い 間隔 で 再生 時 間 を 取得 し た い 場 合 に は 、「setTimeout() 」 メ ノッ ド か [set 
Interval() 」 メ ソ ッ ド な どの タイ マー 処理 行う メソ ッ ド を 使う 必要 が あり ます 。 





関連 項目 | 
才 7NC 凍 た utdvdeGikMksetKeRYYSS2d72EV&GHeHSoi は SSReeSogys24 2 p.396 
@ イベ ント リス ナー を 設定 する 人吉 本 ai 作 あす が が 衝 館員 っ D.398 
@ オー ディ オ を 再生 * 人 本 人 本 本 tyttMy mbkvSAa ts:R4 est ae48t4 Wet444K と eeuedres bt24 く as p.610 
e オー ディ オ の 有 再生 が 終了 し た 際 の イベ ント を 取得 する … ぬ ぬ つ 生 ……… ド ーー ドー…ー…ーー…ーーーー……・ p.633 
@ オー デ ィ オ の ボリ コー ム が 変更 され た 際 の イベ ント を 取得 する 人 W 二 宇宙 す せな 才 39 D.635 
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LIE9 1 Chrome | Safari 5 | Firefox 4 ! Opera11 1 iOS4 』 Android2 1WP/ 


EE ま Nー ジ / 


オー ティ で ベン ト を 
ーー 

こ で は 、 オー ディ オ の 再生 が 終了 し た 際 の イベ ント を 取得 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttle>SampLe</t1tle> 
<SCPtpt src="]S/saqmple .]S "></SCrtDt> 
</head> 
<body> 
<h1>HTML5 Audto</h1> 
<aud1to Src="mus1c/sampte .mp3" controls></aud10o> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 
window .qddEventLtstener("1oqd" , functton()+ 
// オー ディ オ 要 素 を 読み 出す 
var gudio0b] = document.getEtementsByTaqgName( "audto")[9] : 
// オー ディ オ に イベ ント リス ナー を 設定 
audito0b] . oddEventListener("ended", functton(){ 
var flag = conftrm(" 再 生 が 終了 し まし た 。 再度 再生 し ます か ? "): 
tf (flaqg === true){ 
// 再生 時 間 を 9( 最 初 ) に 設定 する 
thts.currentTtme = 9: 
// 再生 する 
thts .plqay(): 
} 
}, fglse): 
}, false): 


ブラ ウザ で index.html を 表示 し 、 オー ディ オ の 再生 が 終了 する と 、 再生 を 再度 、 行う か ど 


うか の ダイ アロ グ が 表示 され ます 。「OK | ボタ ン を クリ ッ ク す る と 再度 オー ディ オ が 再生 され 、 
「 キャ ン セ ル | の ボタ ン を クリ ッ ク す る と そこ で 再生 は 終了 し て 元 の 画面 に 戻り ます 。 





EIDSW ]W1H/OSDI ハ /OIpnv 本 EEEZSE 
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還 王 ビビ TI ロロ NN-2 ワ プロ m オーディオ の 再生 が 終了 し た 際 の イベ ント を 取得 する 


9 再生 が 終了 し まし た 再度 再生 し ます か ? 


オー ディ オ の 再生 が 終了 し た 際 の 処理 を 設定 する に は 
「ended」 イ ベン ト を 使う 


HTMLS5 Audio で は 、 再生 が 終了 する と 、「ended」 イ ベン ト が 発生 し ます 。 ゲー ム の 
ょ うに オー プ ニ ン グ で オー ディ イオ の 再生 が 終了 し た ら 他 の ペー ジ に 移動 し た り 、 次 の 処理 
を 行う 場合 に 利用 で きま す 。 た だ し 、 オー ディ オ で 繰り 返し 再生 を 行う [loop 」 属 性 が 設 
定 さ れ て いる と 、「ended」 イ ベン ト は 発生 し ませ ん 。 な お 、 Firefox で は 「loop」 属 性 を 設 
定 し て る 無効 な の で 、 常に 「ended」 イ ベン ト が 発生 する こと に な り ま す 。 Firefox で 繰り 返 
し 再生 する 場合 は 、「 ended] イ ベン ト を 検知 し た ら 、「currentTime 」 プロ パテ ィ に 「0」 を 
設定 し 、 再度 、| play() 」 メ ノッ ド を 使っ て 最初 か ら 再生 する 必要 が あり ます 。 


II コ N ニ ImII に II 
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LIE9 1 Chrome ! Safari 5 | Firefox 4 1 Opera11_ 


=1 コ mglmlN ロ ン ザ 4 
オー ディ オ の ボリ ュー ム が 変更 され た 隊 の 
イベ ント を 取得 する 


ここ で は 、 オー ディ オ の ボリ ュー ム が 変更 され た 際 の イベ ント を 取得 する 方 法 に つい て 解説 
し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 


<metg chgrset="utf-8"> 








<titte>SampLe</t1tle> 
<SCrtpt src="]S/sample .]S "></SCPr1Dt> 
</head> 
<body> 
<h1>HTML5 Audto</h1> 
<audio src="mustc/saqmple.mp3" controls Loop></qud10> 
<br> 
<output> ボ リュ ー ム を 変更 し て くだ さい </output> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow.qddEventLitstener("1oad" 。 functton(){ 





var ele = document.getEtementsByTagName( "output")[9] : 
// オー ディ オオ プ ジ ェ クト を 生成 する 
var qudto0b] = document.getEtementsByTagName( "audto")[9]: 
// オー ディ オ に イベ ント を 割り 当て る 
qudto0b] . addEventLtstener("volumechange" , functton(){ 
// ボリ ュー ム を 読み 出し 
var n = qudtoO0b] .volume: 
// ボリ ュー ム が 変更 され た 事 を 示す メッ セー ジ を 表示 
ele.innerHTML = "ボリ ュー ム が "+n+" に 変更 され まし た ": 
}, fatse): 
+, fatse): 


glDSW ]N1IH/OSDIA ハ /Olpnv EETENZSE 
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mm 選 E ビ TI ロロ N-27 ] mw オー ディ オ の ボリ ュー ム が 変更 され た 際 の イベ ント を 取得 する 


プラ ウザ で index.html を 表示 し 、 コン トロ ー ラ ー の ボリ ュー ム ス ラ イダ ー を ドラ ッ グ する と 、 リア 
ル タ イ ム に 変更 され た ボリ ュー ム の 値 が 表示 され ます 。 





HTMTLS Audio 


ボリ ュー ム を 変更 し て くだ さい 











HTMLS Audio 


ボリ ュー ム が 0.6200000047683716 に 変更 され まし た 





ms ボリューム 変 更 時 の 処理 を 行う に は 「Vvolumechange」 イ ベン ト を 使う 


HTMLS Audio で ボリ ュー ム ( 音 量 ) が 変更 され る と 、「 volumechange」 イ ベン ト が 発 
生 し ます 。| volumechange」 イ ベン ト が 発生 し た 後 の ボ リュ ー ム の 値 は 、 変更 後 の も る の 
に な り ま す 。 

な お 、 ス マー ト フ ォ ン Phone/iPad/Android/Windows Phone) で は 、 本 体 の ボリ ュー 
ム を 変更 し て も 、| volumechange | イベント は 発生 し ませ ん 。 










関連 項目 ょ ゅ 


の イベ バン ドリ ト ツ ドラ 半生 生生 ck. 人 6)。。WeS22L4 LM423u 09885 p.396 
か た り 本 昌 作 宇 人 nn かれ は tst22323052wter49 actcteFeE HU5e 0 p.398 
か オー ディ の ボム 竣 坦 窟 ミュー ト に する あの の の Ne っ 20 だ 90002202.. 8080 p.6 ら 0 
ゅ オー ディ オ の 貼 汗 時 の イ パ ペッ ン 洒 大 明 矯 き る の いい いい:0IO2NS020LRCSSE p.631 
e オー ディ オ の 再生 が 終了 し た 際 の イベ ント を 取得 する ……… 尼 k ス ドド ーーーーーーーーー 0.633 


LIE9 Chrome Safari 5 | Firefox 4 1 Opera11 1 iOS4 」 Android 2 1WP」 





EN- の プン ジ 
[video」 要素 に アク セス する 


ここ で は 、| video」 要 素 に アク セス する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>SqmplLe</t1tle> 
<SCPtpt src="]S/Sample .]S "></SCr1Dt> 
</heqd> 
<body> 
<h1>HTML5 V1deo</h1> 
<vtdeo Src="movte/sample .mp4" controls></vtdeo> 
<form> 
<tnput type="button" vaqlue=" 再 生 "> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventListener("1oad" 。 functton()1 





var btn = document.getEtementsByTagName( "1nput") う [の] : 
btn.qddEventLtstener("cLtck"。 functton( ){ 
// 最初 の ビデ オ 要 素 を ピッ クア ッ プ 
var vitdeo0b] = document.getEtLementsByTagName("vtdeo")[9] : 
// ビデ オ を 再生 する 
vtdeo0b] .play(): 
+, foalse): 
}。 false): 


ブラ ウザ で index.html を 表示 し 、 ボ タン を クリ ッ ク す る と 、 映 像 が 再生 され ます 。 また 、 コ ント ロー 
ラー で も 映像 の 再生 ・ 停 止 を 行う こと が で きま す 。 な お 、 スマ ー ト フォ ン GPhone/Android 2/ 
Windows Phone) で は 再生 は フル スク リー ン で 行わ れ ま す 。 iPad/Android 3/Android 4 で 
は 画面 内 で 、 その まま 再生 され ます 。 


ID9 ITH/OSDI 八 /OID「1V 放 こ に まき 4 
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生 呈 ビビ ピロ TI 口 NN- ジ ワ mw 「video」 要 素 に アク セス する 





mi 当 =l 下 映 像 に アク セス する に は 「video」 要素 を 使う 


HTML5 で は | video」 要素 を 使う こと で 、 プラ グイ ン を 使わ な く て も 手軽 に ペー ジ 内 に 
映像 を 埋め 込む こと が で きま す 。 た だ し 、 映像 の 形式 や コー デック は 多く あり 、 状況 に よっ 
て サポ ボー ト さ れる 形式 が 異な る 場合 が あり ます 。 

最も シンプ ブル な 書き 方 は 、 サン プル の よう に 、「video」 要 素 の [src」 属 性 に 再生 する 映 
仁 フ ァイル の URL を 指定 する こと で す 。 し か し 、 この 記述 方 法 で は 映像 形式 に 対応 し て 
いな い プ ブラ ウザ や 、 映像 再生 目 体 で き な い デバ イス に 対応 で きま せん 。 この た め 、 次 の よ 
うに 記述 する こと で 複数 の 映像 形式 に 対応 する こと が で きま す 。 

<Vv1deo> 
<source src=" 映 像 ファ イル 、 その 1 "> 
<source src=" 映 像 ファ イル 、 その 2 "> 
<source src=" 映 像 ファ イル 、 その 3 "> 
<p>HTML5 Video に 対応 し て いな い 場 合 の メッ セー ジ な ど </p> 


</V1deo> 


指定 し た 映像 に JavaScript か ら ア クセ ス す る に は 、「document_getElementById 
り 」 メ ソ ッ ド や | document.getElementsByTagName() 」 メ ノ ッ ド 、「documentquery 
Selector() 」 メ ソ ッ ド 、| document.querySelectorAll() | メソ ツ ッ ド な ど を 使い ます 。 

映像 デー タ の 読み 込み に は 時 間 が か か る こと が 多い た め 、「poster」 属 性 を 使っ て 映 
家 の 代 わり に 画像 を 表示 し て お < く こ と も で きま す 。 


mami 加 四 2 に 間 較 FirGfOxX や DDera で の 映像 の 再生 に つい て 


Firefox や Opera で は Ogg/Ogv 形 式 で な いと 、 映像 が 再生 され ませ ん 。 本 書 の サン 
ブル で は 、 MP4 形 式 の 映像 ファ イル を 使っ て いる た め 、 その まま で は 映像 が 再生 され ず 、 
動作 の 確認 を 行う こと が で きま せん 。 Firefox や Opera で 動作 確認 を 行う 際 は 、 別途 、 
Ogg/Ogyv 形 式 の 映像 を 用 意 し 、 サン プル の コー ド を 適宜 、 書き 換え て くだ さい 。 










LIE9 1 Chrome ! Safari 5 | Firefox 4 1 Opera11 1 OS4 」 Android 2 !WP」 


=1 コ mglmlN ロ ン y4 に 
映像 を 再生 ・ 停 止 する 


ここ で は 、 映像 を 再生 ・ 停 止 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttle>SqmpLe</t1tle> 
<SCrtpt src="]S/sample .]S "></scrtDt> 
</head> 
<body> 
<h1>HTML5 Vitdeo</h1> 
<vtdeo src="movte/sqmpte .mp4" controls></vtdeo> 
<for> 
<tnput type="button" vatue=" 再生"> 
<tnput type="button" vglue=" 停 止 "> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .qddEventLtstener("1oad" 。 functton(){ 
// ビデ オ 村 素 を 読み 出す 
var videoOb] = document.getElementsByTagName("vtdeo")[9]: 
// イベ ント を 割り 当て る ボタ ン 要 素 を 読み 出し 
var btn = document .getEtementsByTagName("1nput"): 
btn[9] .aqddEventListener("clLtck", functton(){ 
// 映像 を 再生 
vtdeo0b] .pLay(): 
}, fatse): 
btn[1] .gddEventLtstener("cLtck"。functton()+ 
// 映像 の 再生 を 停止 
v1deoO0b] .pause(): 
+, faqlse): 
+, false): 
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午 王 ピロ 丁 | 口 N- ラ ワ コ 3 m 映像 を 再生 ・ 停 止 する 


フラ ウザ で mdex.html を 表示 し 、 再生 ボタ ン を クリ ッ ク す る と 、 映像 が 再生 きれ ます 。 停止 ボ 
タン を クリ ッ ク す る と 、 再生 が 停止 し ます 。 


再生 を 行う に は 「play()」 メソッド 、 
停止 を 行う に は 「pause() 」 メソ ッ ド を 使う 


HTML5 Video を 再生 する に は 、 ビデ オオ ブ ジ ェクト の 「play () 」 メ ノッ ド を 使い ます 。 
「play り 」 メ ノッ ド 実 行 時 に 映像 ファ イル が 読み 込ま れ て いな い 場 合 で も エラ ー に は な ら 
す 、 再生 可能 に な っ た 段階 で 再生 が 行わ れ ま す 。 

映像 の 再生 を 停止 する に は 、「pause() 」 メ ソ ッ ド を 使い ます 。 [pause () 」 メ ソ ッ ド は 再 
生 を 停止 する だ け で 、 巻き 戻し 処理 な び は 行い ませ ん 。 この た め 、「pause() 」 メ ソ ッ ド 実 
行 後に 再度 、| play() 」 メ ソ ッ ド を 実行 する と 停止 し た と ころ か ら 再 生 が 開始 され ます 。 

スマ ー ト フォ ン GPhone/Android 2/Windows Phone) で は 「play() 」 メ ノッ ド を 実行 
する と 、 フル スク リー ン で 再生 が 行わ れ ま す 。 iPad/Android 3/Android 4 で は 画面 内 
で 、 その まま 再生 きれ ます 。 


関連 項目 ょ ゅ 
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@ 映像 の 再生 時 の イベ ント を 取得 する 上 … い の ハー ュ ョ ラメ オデ ヨ め ュ ーー グ … の ドー ドド ドー ドド ーー ムー D.66 ] 
e 映像 の 再生 が 終了 し た 際 の イベ ント を 取得 する 上 … ド ーーーー…… p.663 
@ 也 像 を フル ズ ク グリー ン 表 示 に すず する で せ で 上 生 デー ニー つ ー ビ ピ ヒ ヒ ピコ ロ い ビー エ や に D.796 
$ 衝 メラ か カ から の 3 映 側 かみ 玩 策 す 各 | moe ev ウト レース に れ ル に nAN2040 40L 2o0 D.667 
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BE 上 ED じ TIHN- ビ ソノ オ 4 


映像 の 再生 時 間 を 取得 ・ 設 定 する 


ここ で は 、 映像 の 再生 時 間 を 取得 ・ 設 定 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<heagd> 
<meta charset="utf-8"> 
<tttle>Sqmple</t1tle> 
<SCP1Dt Src="]S/sqmple.]S"></SCr1Dt> 
</head> 
<body> 
<h1>HTML5 Vitdeo</h1> 
<vtdeo Ssrc="mov1te/saqmptle .mp4" controts></vtdeo> 
<form> 
<tnput type="text" value="2.5" 1d="startT1me"> 
<tnput type="button" vglue=" 指 定 し た 時 間 か ら 再 生 "> 
</form> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .qddEventListener("tLoad" 。 functton() も t 
// ビデ オ 要 素 を 読み 出す 
var vtdeo0b] = document .getEtementsByTagName( "vtdeo")[9] : 
// イベ ント を 割り 当て る ボタ ン 要 素 を 読み 出し 
var btn = document.getElLementsByTagName( "1nput"): 
btn[1] .qddEventLtstener("cLtck"。 functton(){ 
// 設定 時 間 を 読み 出し 
var ttme = document.getELementById( "startTtme") .value: 
// 時 間 を 設定 
vtdeo0b] . currentTtme = ttme: 
// 映像 を 再生 
vtdeo0b] .ploy(): 
+。fqlse): 
// ビデ オ 要 素 に イベ ント を 割り 当て 
vtdeo0b] . gddEventLtstener( "ttmeupdate",。 functton(){ 
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var ele = document .getEtementsByTagName( "output")[9] : 
// 再生 時 間 を 表示 
ele.tnnerHTML = "再生 時 間 :"+thts .currentTime: 
+。 false): 
+。fqlse): 
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mm ビ ピロ TI ロ NN -2 ワ 4 mW 映像 の 再生 時 間 を 取得 ・ 設 定 す る 


ブラ ウザ で index.html を 表示 し 、 開始 時 間 を 入力 し た 後 で 、 再生 ボタ ン を クリ ッ ク す る と 、 
映像 が 指定 し た 時 間 か ら 再 生き れ 、 画面 に 再生 時 間 が 表示 され ます 。 





再生 時 間 : 125808EHH268 1 


再生 開始 時 間 の 設定 と 再生 時 間 の 取得 に は 
2 TurT9tTIme」 プロ バテ ィ を 使う a 


現在 の 再生 時 間 を 取得 する に は 、 ビデ オオ プ ブ ジ ェクト の 「currentTime」 プ ロ パ ティ を 
誠 照 し ます 。 | currentTime」 プ ロ パ ティ の 内 容 は 再生 きれ て いる 時 間 で あり 、[「5.963」 
の よう に ミリ 秒 を 含む 値 に な り ま す . 

目 定 し た ye する 場合 に は 、| currentTime」 プ ロ パ ティ に 再生 を 開始 し た 
い 時 間 を 設定 し ます 。 な お 、 再生 中 で も 、 停止 中 で も 、「currentTime」 プ ロ パ ティ に 値 
を 設定 する Pa 


mm 癌 四半 スマ ー ト フォ ン の 場合 の 「currentTime」 プロ バテ ィ 


Android 2 で は 、| currentTime 」 プ ロ パ ティ に 秒 数 を 設定 し た 場合 、 コン トロ ー ラ ー 

に は 反映 され る こと が あり ます が 、 映像 は 最初 か ら 再 生き れ ま す 。 

また 、iOS で は 一 度 、 映像 を 再生 し た 後 で な いと 、| currentTime」 プ ロ パ ティ に 秒 数 
を 設定 し て も 反映 され ませ ん 。 


5) で は 、| currentTime」 プ ロ パ ティ に 秒 数 を 設定 し て も 反映 さ 
れず 、 最初 か ら 再 生 が 行わ れ ま す 。 




























Windows Phone (7 
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=1 コ eglmlN ロ ン ザ 4 に 
映像 の 長 さ を 調べ る 


ここ で は 、 映像 の 長き を 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meto charset="utf-8"> 
<ttt1e>SqmpLe</t1ttle> 
<sCrtpt src="]S/sampte .]S "></SCrtpt> 

</head> 

<body> 
<h1>HTML5 Video</h1> 
<vtdeo src="movte/sqmple .mp4" controls></vtdeo> 
<formW> 

<input type="button" vatue=" 長 さ を 調べ る "> 

</form> 
<OuUtDu キ ></OUtDut> 

</body> 

</html> 


JavaScript の コー ド (sample.jS) 


witndow .aqddEventListener("toad" 。 functton(){ 





var btn = document.getEtementsByTagName( "1nput")[9]: 
// ビデ オオ プ ジ ェ クト を 生成 
var videoOb] = document.getELementsByTagName("vtdeo")[9]: 
// ボタ ン に イベ ント を 割り 当て 
btn.addEventLtstener("cLtck",。functton(){ 
// オー ディ オフ ァイル の 長 さ ( 尺 ) を 変数 に 代入 
var Sec = video0b] .duratton: 
document.getEtementsByTagName( "output")[9] .innerHTML = sec+" 秒 ": 
+。 false): 
+, faqlse): 
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W ビビ ピロ T 口 NN - ラ ワ 5 mW 映像 の 長 さ を 調べ る 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 映像 の 長 さ が 表示 され ます 。 


10.013333320617673 秒 


mjiiaemji 中 映像 の 長 さ を 取得 する に は 「duration」 プロ パテ ィ を 使う 








大 失 の く ) は 、 ビデ オオ プ ブ ジ ェクト の 「 duration」 プロ パテ ィ を 参照 する こと で 取 

革 で きま す 。 MY 長 さ を 秒 数 で 返し ます 。 た だ し 、 映像 が 読み 込 
由 て いな い 場 合 は 、| NaN」 に な り ま す 。 

また 、 同じ 映像 で も 、 プラ ウザ に よっ て 違う 長き を 返し て くる 場合 が あり ます 。 この た め 、 
1/10 秒 より 精度 を 必要 と する 場合 は 注意 が 必要 で す 。 映像 の フォ ー マ ッ ト を 変換 し た 場 
合 に も 、 同様 に 、 映像 の 長 さ が 変わ っ て し まう 場合 が あり ます 。 

スマ ー ト フォ ン OS/Android ) で は 、 映像 が 再生 きれ て いな い 場 合 ( 映 像 デー タ が 読 
み 込 まれ て いな い 場 合 )、「 duration 」 プロパ ティ は 「NaN」 を 返し ます 。 Windows Phone 
で は 、 映像 デー タ が 読み 込ま れ て いな い 場 合 は 「NaN」 を 返し ます が 、 読み 込ま れ た 後 で 
も 映像 の 長 さ が 返さ れ ま せん 。 この た め 、 映像 の 長 さ を 取得 する こと は で きま せん 。 
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LIE9 』Chrome Safari 5 Firefox 4 1 Opera11 』iOS4 1 Android 2 』!WP」 


9 に ET IEJN-2 / 双 
生 定 し た 形式 の 映像 が 再生 可能 か が どう か 
調べ る 
ここ で は 、 指定 され た 映像 の 形式 が 再生 可能 か どう か 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttle>SqmpLe</t1tle> 
<SCrtDt Src="]S/Sample.]S"></SCr1Dt> 
</head> 
<body> 
<h1>HTML5 Video</h1> 
<form> 
<tnput type="text" value="vtdeo/mpeg" 1d="mtype "><br> 
<input type="button" value=" 再 生 可 能 か 調べ る "> 
</form> 
<OUtDu キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .qddEventLtstener("1ogd" 。 functton(){ 





var ele = document.getElLementsByTagName( "output")[9] : 
// video 要 素 を 生成 する 
var vtdeo0b] = document.createElement("vtdeo"): 
// イベ ント を 割り 当て る ボタ ン 要 素 を 読み 出し 
var btn = document.getEtementsByTagName( "1nput")[1] : 
btn.qddEventListener("clLitck"。 functton( ){ 

// MIME Type を 読み 出し 

var mt = document.getElLementByTd( "mtype" ) .value: 

// 再生 可能 か どう か 調べ る 

var result = video0b].cqnPlayType(mt): 


IDSI ITH/OSDI 八 /OID「IV に EEM4EE」 


// 結果 を 表示 
ele.innerHTML = mt+" 形 式 は 再生 で きま せん ": 
tf (result === "maybe")+ 

ele.innerHTML = mt+" 形 式 は 再生 可能 で す ": 
} 


tf (resultt === "probabty"){ 
ele.innerHTML = mt+" 形 式 は 多分 、 再生 で きま す ": 


} 
}。 foalse): 
+,。 false): 
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mW 王 ビ ビビ ピ TI ロロ N-2 プ 6 m 指定 し た 形式 の 映像 が 再生 可能 か どう か 調べ る 


ブラ ウザ で index.html を 表示 し 、 再生 で きる か どう か 調べ た い 映像 ファ イル の MIME タ イプ 
を 入力 後 、 ボ タン を クリ ッ ク す る と 、 結果 が 表示 され ます 。 


HIMLS Video 





video/mp4 


videomp4 形 玉 は 再生 可能 で す 





再生 で き な い 場合 は 、 次 の よう に 表示 され ます 。 


HIMLS Video 


video/ogv 
・ ビ 了 、 き し ぶ ズ テ 、」 


wideo/ogy 形 式 は 再生 で きま せん 





映像 ファ イル の 形式 が 再生 可能 か 調べ る に は 
mmid 「canPlayType()」 メ ソ ッ ド を 使う 


HTML5 Video で は 、 特定 の ファ イル 形式 が 再生 で きる か どう か を 調べ る こと が で きま 
す 。 再 生 可 能 か どう か 調べ る に は ビデ オオ ブ ジ ェクト の 「canPlayType() 」 メ ソ ッ ド を 使い 
ます 。| canPlayType() 」 メ ソ ッ ド の パラ メー タ に 、 調べ る ファ イル の MIME タ イプ を 指定 
し 肖 ず 。 

再生 で きる 場合 に は | maybe'」 の 文字 を 、 再生 で きる か も し れ な い 場 合 に は 
| probably 」 の 文字 を 返し ます 。 再生 で き な い 場合 は 、 空 文 字 が 返さ れ ま す 。 

な お 、 主 な 映像 形式 の MIME タ イプ は 、 次 の 表 の よう に な り ま す 。 




















Ogg(Ogy 形 式 
3GPP 形 式 
WebM 形 式 











LIE9 Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS4 」 Android 2 LWP 





EE TEN 2 アル ん 


映像 ファ イル の 読み 込み に 応じ て 変化 する 
通信 状態 を 調べ る 


ここ で は 、 映 像 ファ イル の 読み 込み に 応じ て 変化 する 通信 状態 を 調べ る 方 法 に つい て 解説 
し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttle>Sqmp Le</t1tle> 
<SCPtDpt src="]s/sample.]S"></SCr1tpt> 

</head> 

<body> 
<h1>HTML5 Video</h1> 
<vtdeo src="movte/saqmple.mp4" controls></vtdeo> 
<formW> 

<tnput type="button" vaqtue=" 通 信 状 況 を 調べ る "> 

</form> 
<OUtDut></OutDut> 

</body> 

</html> 


JavaScript の コー ド (sample.jS) 


window.addEventLtstener("1oad" 。 functton(){ 





var ele = document .getEtLementsByTagName( "output")[ の ]: 
// ビデ オオ プ ジ ェ クト を 生成 する 
var video0b] = document .getElementsByTagName("vtdeo")[9] : 
// 通信 状態 を 格納 し た 配列 を 用 意 
var nstat = ["EMPTY", "TIDLE"。 "LOADING" 。 "NO_SOURCE"] : 
var rstgt = ["NOTHING" 。 "METADATA" "CURRENT_DATA" "FUTURE_DATA" 。 "ENOUGH_DATA"]: 
// イベ ント を 割り 当て る ボタ ン 要 素 を 読み 出し 
var btn = document .getElementsByTagName( "tnput" う [9]: 
btn . gddEventListener("cltck"。 functton()+ 
// ネッ トワ ー ク 状態 を 読み 出し 


var s = video0b] . networkStqte: 


IDS WTH/OS9DI 八 /OID「1V 攻 に まき に 4 ミド) 


var rs = vitdeo0b] . readyState: 
// 結果 を 表示 
ele.tnnerHTML = "networkState : "+nstat[ s] : 
ele.1tnnerHTML += "<br>readyState:"+rstat[rs] : 
+, faqlse): 
+, false): 
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mg EETIHN-2 ワ ワ 症 映像 ファ イル の 読み 込み に 応じ て 変化 する 通信 状態 を 調べ る 


プラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 現在 の 通信 状態 が 画面 に 表示 さき 
れ ま す 。 


ロ 記 べ 


IDLE 


readyState:ENOUGH_DATA 


miiiamj 自 通信 状態 を 調べ る に は 「networkState」 プロ パテ ィ を 使う 








映像 ファ イル の 読み 込み が 行わ れる と 、 通信 状態 が 変化 し ます 。 この 通信 状態 が ど 
の よう に な っ て いる か は 、 ビデ オオ ブ ジ ェクト の 「networkState 」 プロ パテ ィ を 参照 し ます 。 
| networkState」 プロパ ティ に は 、 次 の 表 に 示す 値 が 入っ て いま す 。 


| 0 | ネッ トワ ー ク は 空っぽ 
ソー ス (ファ イル / デ ー タ ) が な い 

また 、|networkState」 プロ パテ ィ 以 外 に も 、「readyState 」 プロ パテ ィ で も 状況 を 取得 
する こと が で きま す 。 |「 readyState」 プロ パテ ィ に は 、 次 の 表 に 示す 値 が 入っ て いま す 。 


メタ デー タ の 読み 込み 完了 
少し 先 ま で 再生 で きる デー タ を ダウ ン ロ ー ド 
スム ー ズ に 再生 で きる 十分 な デー タ を ダウ ン ロ ー ド 








避 
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=1 ゴ iglmlN ン y4= 
映像 の ボリ ュー ム を 設定 ・ ミ ュー トド する 


ここ で は 、 映像 の ボリ ュー ム を 設定 ・ ミ ュー ト す る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttle>Sqmple</t1tle> 
<SCrtpt src="]Ss/sample .]S"></SCr1Dt> 
</head> 
<body> 
<h1>HTML5 Vtdeo</h1> 
<vtdeo src="movte/sqmple.mp4" controls Loop></vtdeo> 
<forrm> 
<tnput type="text" value=" の 9.5" 1d="vol"><br> 
<input type="button" value=" ボ リュ ー ム を 設定 する "><br> 
<tnput type="button" vatue=" ボ リュ ー ム を 読み 出す "><br> 
<tnput type="button" vglue=" ミ ュー ト ( ク リッ ク で 切り 替え )"> 
</form> 
<OUtDut キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window.aqddEventLtstener("1oqd" 。 functton(){ 





var ele = document.getEtementsByTagName( "output")[9]: 
// ビデ オオ プ ジ ェ クト を 生成 する 
var video0b] = document.getEtementsByTagName("vtdeo")[9]: 
// イベ ント を 割り 当て る ボタ ン 要 素 を 読み 出し 
var btn = document.getEtementsByTagName( "tnput"): 
// ボリ ュー ム 設 定 を 行う ボタ ン に イベ ント を 設定 
btn[1] .addEventListener("cltck", functton(){ 
// 設定 する ボリ ュー ム 値 を 読み 出し 
var n = documert.getELementByTd("vol").vatlue: 
// 映像 の ボリ ュー ム と し て 設定 
vtdeo0b] .volume = nij 
// 設定 し た こと を 示す メッ セー ジ を 表示 
ele.innerHTML = "ボリ ュー ム を 設定 し まし た ": 
+, foatse): 
// ボリ ュー ム を 読み 出す ボタ ン に イベ ント を 設定 
btn[2] .addEventListener("cLtck", functton(){ 
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生 選 ビビ TI ロロ N-2 ワ 日 m 映像 の ポリ ュー ム を 設定 ・ ミ ュー ト す る 


// 現在 の ボリ ュー ム 値 を 読み 出し マヤ 
var n = v1deo0b] . volume: 
// 設定 し た こと を 示す メッ セー ジ を 表示 
ele.innerHTML = "現在 の ボリ ュー ム :"+n 

}。 fgqlse): 

// ミュ ー ト を 設定 する ボタ ン に イベ ント を 設定 

btn[3] .gddEventLtstener("cttck"。functton(){ 
// 現在 の ミュ ー ト 状態 を 読み 出し 値 を 反転 する 
var flag = video0b] .muted = !vtdeo0Ob] .muted: 
// 設定 し た こと を 示す メッ セー ジ を 表示 
ele.tnnerHTML = "ミュ ー ト 状態 : "+flgg: 

}, faqtse): 

}, fgqlse): 


ブラ ウザ で jndex.html を 表示 し 、 テキ スト フィ ー ル ド に 設定 し た い ボ リュ ー ム 値 ([00 |- 
| 10」) を 入力 後 、| ボリュー ム を 設定 する 」 ボ タン を クリ ッ ク す る と 、 ボリ ュー ム が 設定 され ます 








ams 
ポリ ュー ム を 設定 し まし た 


| ボリ ュー ム を 読み 出す ]」 ボ タン を クリ ッ ク す る と 、 現在 の ボリ ュー ム 値 が 表示 され ます 。 





ミュ こ ト (の こ ク MM 委ね 
見 在 の ボリ リー ム :0.11999999731779098 


生 呈 ビビ ロ TI 口 N -2 ワ 日 m 映像 の ボリ ュー ム を 設定 ・ ミ ュー ト す る 


[ミュー ト ( ク リッ ク で 切り 替え ) 」 ボ タン は クリ ッ ク す る た びに 、 ミュート の ON/OFF が 切り 共 わ り 
ます 。 


ミュ ー ト 状態 : wue 


ボリ ュー ム を 調整 する に は 「volume」 プロ バテ ィ 、 
mMMMI ミュ ー ト を 設定 する に は 「muted」 プロ パテ ィ を 使う 


HTML5 Video で ボリ ュー ム ( 音 量 ) を 設定 する に は 、 ビ デオ オブ ジェ クト の | volume」 
プロ パテ ィ に 値 を 代入 し ます 。 設定 で きる 値 は [0.0」ー「1.0」 の 範囲 に な り ま す 。 この 男 
囲 を 超え た 場合 、 自動 的 に 値 を 調整 し て 設定 され る 場合 も あり ます (負数 の 場合 は 設 
定 さ れ な い 場 合 が ある ) 。 また 、 現在 の ボリ ュー ム を 読み 出す に は 、 ビデ オオ プ ジ ェ クト の 
「volume 」 プ ロ パ ティ を 参照 し ます 。 

ボリ ュー ム の 調整 で は な く 、 一 時 的 に 音 を 消す (ミュ ー ト / 消 音 ) 場 合 に は 、 ビデ オオ 
ブ プ ジェ クト の 「muted」 プ ロ パ ティ に 「 true」 を 設定 し ます 。 再度 音 2 こす る に 
| false」 を 設定 し ます 。 

な お 、 ボリ ュー ム 関 係 は 、 スマートフォン で は 読み 出す こと は で き て も 設定 する こと が で 
き な い 場合 が あり ます 。 その 際 、 設定 し て も エラ ー は 発生 し ませ ん 。 


関連 項目 


3 映像 の ボリ ュー ム が 変 更 さ れ た 際 の イベ ント を 取得 する まま Wi の 湯 1 人 D.665 
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EIDS ]N1H/OSDIA/OIlpnv 本 SZ5 


Ll 


LIE9 』Chrome Safari 5 | Firefox 4 1 Opera 11 1 iOS4 | Android2 WP 


5 ら EUDTIHN-2 フ フウ 


映像 の コン トロ ー ラ ー の 表示 / 非 表示 を 
設定 する 


ここ で は 、 映像 の コン トロ ー ラ ー の 表示 / 非 表示 を 設定 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<heqd> 
<metg charset="utf-8"> 
<tttte>Sqample</t1tle> 
<Scrtpt src="]Ss/sqmple.]S"></scrtpt> 
</heqd> 
<body> 
<h1>HTML5 Video</h1> 
<vtdeo src="movte/sqmple.mp4" controls></vtdeo> 
<form> 
<tnput type="button" vaqlue=" 表 示す る "> 
<tnput type="button" vatue=" 非 表示 に する "> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.gddEventLtstener("1ogd" 。 functton(){ 





Var' btn = document.getEtementsByTagName( "1nput"): 
// ビデ オオ プ ジ ェ クト を 読み 出し 
var vtdeo0b] = document.getELementsByTagName( "vitdeo")[9] : 
// ボタ ン に イベ ント を 割り 当て 
btn[9] .gddEventLtstener("cltck"。 functton(){ 
// コン トロ ー ラ ー を 表示 する 
vtdeo0b] .controls = true: 
}, fqlse): 
// ボタ ン に イベ ント を 割り 当て 
btn[1] .gqddEventLtstener("ctitck"。functton(){ 
// コン トロ ー ラ ー を 非 表 示 に する 
vtdeo0b].controls = fatse: 
}, faqtse): 
}, fatse): 





BIDSWA_1IWTH/OSDI 人 ハ /OIDTIV に に EMMAg 


ブラ ウザ で index.html を 表示 する と 、 最初 の 状態 で は コン トロ ー ラ ー は 表示 され て いま す 。 
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mm 己 ロ 丁 | ロト N!| - ラ プロ wm 映像 の コン トロ ー ラ ー の 表示 / 非 表示 を 設定 する 





「 非 表示 に する ] ボ タン を クリ ッ ク す る と 、 コン トロ ー ラ ー が 消え ます 。 





mI 記 ml 下 コン トロ ー ラ ー の 処理 を 行う に は 「controlsS] プロ パテ ィ を 使う 





「video」 有 要素 で は 、 コン トロ ー ラ ー を 表示 する た め の | controls」 属 性 が 月 rw 
ます 。 MS に よっ て は 、| controls」 属 性 を 指定 し Ed する 
が で き な い (表示 され な い ) 場合 が あり ます 。 また 、 コン トロ ー ラ ー は 表示 する 必要 が ある 
が 、 再生 中 は 消し て お きた い 場 合 も あり ます 。 

コン トロ ー ラ ー の 表示 制御 は 、 ビデ オオ プ ブ ジ ェクト の | controls」 プロ パテ ィ に | true」 、 
また は 、「false」 を 代入 する こと で 行い ます 。 | true」 に する と コン トロ ー ラ ー が 表示 され 
「 false」 に する と コン トロ ー ラ ー は 非 表 示 に な り ま す 。 

な お 、 コン トロ ー ラ ー の 表示 サイ ズ や 、 表示 され る ボタ ン な ど は プラ ウザ や バー ジョ ン に 
よっ て 異な り ま す 。 また 、 iPhone/Android 2/Windows Phone で は ペー ジ 内 で 映像 を 
再生 する こと が で き な い た め 、 コン トロ ー ラ ー の 表示 処理 は 実質 的 に 行わ れ ま せん 。 


BIDSWN ]1H/OSDIA/OIlpnv ETETEZSE 
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LIE9 』 Chrome 」 Safari 5 Firefox 4 ! Opera11 | iOS4 1 Android2 } WP」 


=1 ゴ mglmlN 則 <1=fm 
映像 デー タ を 読み 込む 


ここ で は 、 後 か ら 映 像 デー タ を 読み 込む 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<t1ttle>SqmpLe</tttle> 
<SCr1Dt src="]S/sqmple .]S"></sCrtDt> 
</hegd> 
<body> 
<h1>HTML5 Video</h1> 
<v1deo Ssrc="movte/sampLe.mp4" controls></vtdeo> 
<foriW> 
<tnput type="button" vaqlue=" 読 み 込み "> 
<tnput type="button" vatue=" 再 生 "> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


window . addEventLtstener("1oqd" 。functton( ){ 





var btn = document.getELementsByTagName( "1nput"): 
// vtdeo 要 素 を 読み 出す 
var videoOb] = document.getEtementsByTagName("vtdeo" う [9] : 
// ボタ ン に イベ ント を 割り 当て 
btn[9] .gddEventLtstener("cltck"。functton(){ 
// 映像 ファ イル を 読み 込み 
vtdeo0b].src = "movte/matsumoto]yo .mp4"・ 
}, faqlse): 
// ボタ ン に イベ ント を 割り 当て 
btn[1] .qddEventListener(C"cttck"。functton(){ 
// 映像 を 再生 する 
vtdeo0b] .play(): 
}, fatse): 
}, false): 





glDSW ]W1H/OepI ハ /Olpny EE 計 ee 
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mm 選 ロロ T| 口 ト N! -2 晶 ロ m 映像 デー タ を 読み 込む 


ブラ ウザ で index.html を 表示 し 、 再生 ボタ ン を クリ ッ ク す る と 、 最初 に 読み 込ま れ た 映像 が 
再生 され ます 。 





再生 途中 で 読み 込み ボタ ン を クリ ッ ク す る と 、 他 の 映像 ファ イル が 読み 込ま れ 画 面 が 切り 替 
わり ます 。 再生 ボタ ン を クリ ッ ク す る と 、 最初 か ら 映像 が 再生 され ます 。 





IDB ILH/OSDI 八 /OID「1V 攻 こ に ドミ 


ロロ NEPINT 





映像 ファ イル を 状況 に 合わ せ て 変え て 再生 し た い 場 合 が あり ます 。 この よう な 場合 、 ビ 
デオ オブ ジェ クト の | src」 プロパ ティ に 再生 し た い 映 像 ファ イル の URL を 指定 し ます 。 これ 
に より 、 動 的 に 再生 きれ る 映像 を 変え る こと が で きま す 。 





関連 項目 ょ ゅ 」 


e 画像 や 映像 ファ イル を 読み 込む … 必 li…ー ビ に に om D.687 
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LIE9 1Chrome 1 Safari 5 | Firefox 4 ! Opera 11 1 iOS4 1 Android2 1WP_ 


mi LEI に 1N- 有 2 要 


映像 の 再生 状態 を 調べ る 


ここ で は 、 映像 の 再生 状 馴 を 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<t1 て le>SqmpLte</tttle> 
<SCr1Dt Ssrc="]S/sample.]S"></Scrtpt> 
</heqd> 
<body> 
<h1>HTML5 Video</h1> 
<vtdeo src="movie/sqmpte.mp4" controlts 1oop></vtdeo> 
<br> 
< く OUtDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("1oad"。 functton(){ 
// video 要 素 を 読み 出す 
var vitdeo0b] = document.getElementsByTagName( "video")[9] : 
// タイ マー を 使っ て 映像 の 状態 を 監視 する 


setTtmeout(functton(){ 





var ele = document.getElementsByTagName( "output")[9] : 
// 再生 速度 を 表示 
ele.tnnerHTML = "playbackRate: "+vtdeo0b] .plaqybackRate : 
// 一 時 停止 状態 を 表示 
ele.tnnerHTML += "<br>paused: "+vtdeo0b] . paused: 
// 再生 終了 状態 を 表示 
ele.tnnerHTML += "<br>ended: "+vtdeo0b] . ended: 
// 自動 再生 状態 を 表示 
ele.1nnerHTML += "<br>qutoplay : "+vtdeo0b] . gutoptoy: 
// ルー プ ( 繰 り 返 し 再生 ) 状 態 を 表示 
ele.tnnerHTML += "<br>toop: "+vtdeo0b]. toop: 
// タイ マー 処理 を 継続 
setT1meout(arguments .cqltee, 259): 
+, 259): 
}, false): 


IDB ITH/OSDI ハ /OID「IV 語 記 コマ ロロ 
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生 王 己 ピロ T| 口 ト N! -22 日 1 wm 映像 の 再生 状態 を 調べ る 


プラ ウザ で index.html を 表示 する と 、 映像 の 状態 が コン トロ ー ラ ー の 下 に 表示 され ます 。 


playbackRate: 1 
Daused: truc 
ended: false 
autoplay: false 
loop: true 





映像 を 再生 する と 、 プロ パテ ィ の 状態 が 変化 し ます 。 


HIIMLS Video 





playbackRate: 1 
paused: false 
ended: false 
autoplay: false 
loop: true 





BIDS ]N1H/O8pIA/Olpnv SE 還 写 ZS 
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mm ビ ピロ TI ロロ N-2 日 1 m 映像 の 再生 状態 を 調べ る 


映像 の 状態 を 取得 する に は 「currentTime」 プロ バ パティ や 
iM 「Daused」 プロ バテ ィ な ど を 使う 


HTML5 Video で は 、 さ きま ざま な プロ パテ ィ が あり ます 。 その 中 で 再生 状態 示す プロ パ 
ティ は 、 次 の 表 の よう に な り ま す 。 プロ パテ ィ は 、 どの プラ ウザ で も 読み 出す こと が で きま す 。 


現在 の 再生 時 間 ( 再 生 ヘ ッ ド の 位置 ) 
映像 の 長 さ 


停止 し て いる か どう か 。 停止 し て いれ ば 「true」、 再生 時 は 「false」 


再生 速度 (等 倍速 だ と 1.0、 2 倍速 な ら 2.0) 
再生 が 終了 し て いる か 。 終了 し た ら 「true」 、 そ う で な けれ ば 「false」 


ザジ Po 谷 う で な い 
自前 再 生 する か どう 2 自動 再生 する 場合 は 「true 」 、 そう で な い 場 


| ep 繰り 返し (ルー プ ) 再生 する か どう か 。 「true」 なら 繰 り 返 し 、 [false | 






















な ら 繰 り 返 さ な い 。 た だ し 、 Firefox で は loop が 機能 し な い 





LIE9 Chrome 』 Safari 5 ) 


ES EN- の ロン 


映像 の 再生 速度 を 変更 する 


ここ で は 、 映像 の 再生 速度 を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<heqd> 
<meta charset="utf-8"> 
<tttte>Sample</t1tLe> 
<SCrtDt src="]S/saqmple.]S "></SCr1Dt> 
</head> 
<body> 
<h1>HTML5 Video</h1> 
<vtdeo src="movte/saqmple.mp4" controls Loop></vtdeo> 
<form> 
<tnput type="button" vglue="1 倍 速 "> 
<tnput type="button" vatue="2 倍 速 "> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.qddEventListener("1oad" 。 functton()+ 





var btn = document.getELementsByTagName("1nput"): 
// video 要 素 を 読み 出し 
var video0b] = document.getElementsByTagName( "video")[9]: 
// ボタ ン に イベ ント を 割り 当て 
btn[9] .addEventListener("cltck"。 functton()+ 
// 1 倍速 で 再生 する 
vtdeo0b] .playbackRate = 1.0: 
vtdeo0b] .defaultPlaybackRate = 1.09: 
}。 faqlse): 
// ボタ ン に イベ ント を 割り 当て 
btn[1] .qddEventLtstener("cLtck", functton()# 
// 2 倍速 で 再生 する 
vtdeo0b] .ptaybackRate = 2.0: 
vtdeo0b] .defaultPlaybackRate = 2.0: 
+, faqlse): 
+, false): 


glIDSW ]W1H/OSDIA/OIpnv 還 写 ZEE 
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き ビビ TI ロロ NI-2 日 2 m 映像 の 再生 速度 を 変更 する 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 再生 速度 が 変更 され ます 。 









miiiagml 下 再生 速度 を 変更 する に は 「playbackRHate」 プロ パテ ィ を 使う 


IE9 以 降 や Google Chrome、 Safari で は 、 映像 の 再生 速度 を 変更 で きま す 。 この 場 
合 、 ビデ オオ ブ ジ ェクト の 「 playbackRate」 プロ パテ ィ に 再生 速度 の 倍率 を 指定 し ます 。 
| 1.0] で あれ ば 等 倍速 に 、|05」 な ら 半 分 の 速度 (スロ ー 再 生 )、「2.0」 な ら 倍 速 再生 に 
な り ま す 。 あま り 、 大 きい 数 値 や 小さ い 数 値 を 指定 する と 、 指定 し た 通り の 速度 で 再生 き 
れ な いこ と が あり ます 。 IE9 の 場合 、| playbackRate」 プロ パテ ィ に 値 を 設定 し て か ら 実 
際 に 反映 され る まで に 数 秒 か か る こと も あり ます 。 また 、 IE9 で は 映像 が ルー プ 再 生き れ 
て いる 場合 、 映像 の 最初 に 戻る と | playbackRate」 プロ パテ ィ に 設定 し た 値 は 反映 きれ 
すず デフ ォ ル ト 値 に 戻り ます 。 

デフ ォ ル ト の 再生 速度 を 設定 する 場合 に は 、| defaultPlaybackRate」 プロ パテ ィ に 再 
生 速 度 の 倍率 を 指定 し ます 。| defaultPlaybackRate」 プロ パテ ィ を 設定 し て お け ば 
IE9 で も 、 ルー プ 再 生 で 最初 に 戻っ た と き に 設定 し た 速度 で 映像 が 再生 され ます 。 










LIE9 1 Chrome 1 Safari 5 | Firefox 4 | Opera11 1 iOS4 | Android2 !WP 


=1 コ mglmlN 則 1= に 
映像 の 再生 時 の イベ ント を 取得 する 


ここ で は 、 映像 の 再生 時 の イベ ント を 取得 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.htm) E 








<!DOCTYPE html> し ーー 
<html> 販 
<hegd> e _ 
<meta charset="utf-8"> ロ 
<tttle>SqmpLe</t1t1e> 9 4 放 
<scrtpt src="]S/sample.]S"></scrtpt> ロ 

</head> (22 6 ト | 

0 3 Ne 
<h1>HTML5 Video</h1> tt: “ に 
<vitdeo src="movite/sample .mp4" controls></vtdeo> 店 
<br> | 
<OutDut></OutDut> 丘 
</body> 回 

</html> ーー 
本 


JavaScript の コー ド (sample.jS) 
wtndow.addEventListener("Logd" functton()t 
// video 要 素 を 読み 出す 
var video0b] = document.getEtementsByTagName("vtdeo")[9] : 
// 映像 に イベ ント リス ナー を 設定 
vtdeo0b] . addEventListener( "ttmeupdate" functton()+ 
var ele = document.getElementsByTagName( "output")[ の ] : 
// 再生 時 間 を 表示 
ete.tnnerHTML = "再生 時 間 :"+thts .currentTime: 
+。 foalse): 
}。 faqlse): 
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mE ビ TI ロ N-2 昌 コ m 映像 の 再生 時 の イベ ント を 取得 する 

ブラ ウザ で mdex.html を 表示 し 、 映像 を 再生 する と 、 コン トロ ー ラ ー の 下 に 再生 時 間 が 表 
示さ れ ま す 。 また 、 再生 し て いな い 状 態 で も 、 コン トロ ー ラ ー 上 の スラ イダ ー を ドラ ッ グ する と 、 再 
生 時 間 が 表示 され ます 。 


HIIMILS Video 


再生 時 間 :6.323356151580&105 


msi 邊 映 像 の 再生 時 の 処理 を 設定 する に は 「timeupdate」 イベ ント を 使う 


HTML5 Video で は 、 現在 の 再生 時 間 を 示す 「currentTime」 プロパ ティ の 値 が 変 
化し た 場合 に 、| tmeupdate」 イ ベン ト が 発生 し ます 。「play () 」 メソッド を 使っ た り 、 コ ント 
ロー ラー で 再生 し た り し た 際 に 発生 する の は も ちろ ん 、 コン トロ ー ラ ー で 再生 時 間 を 示す 
スラ イダ ー を ドラ ッ グ し た 場合 に も | tmeupdate」 イ ベン ト は 発生 し ます 。 

| tmeupdate」 イ ベン ト の 発生 間隔 は 、 ブラ ウザ ゃ 動作 環境 (OS や バー ジョ ン ) に よっ 
て 仁 な り ま す 。 Firefox の よう に 頻繁 に 発生 する ブラ ウザ も あれ ば 、 Safari の よう に 1 秒間 
に 数 回 し か 発生 し な い ブ プラウザ も あり ます 。 

より 短い 間隔 で 再生 時 間 を 取得 し た い 場 合 に は 、「setTimeout() 」 メ ノッ ド か 、「set 
Interval () 」 メ ソ ッ ド な どの タイ マー 処理 行う メソ ッ ド を 使う 必要 が あり ます 。 
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e 映像 の ボリ ュー ム が 変更 され た 際 の イベ ント 取得 する ………… ド ドド ーー ドーー ド ーーーー……… p.665 


LIE9 1 Chrome Safari 5 」 Firefox 4 1 Opera11 1 iOS4 」 Android 2 !WP 


=1 コ mglmlNB ン = と 
映像 の 再生 が 終了 し た 際 の イベ ント を 取得 する 


ここ で は 、 映像 の 再生 が 終了 し た 際 の イベ ント を 取得 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<heqd> 
<meta charset="utf-8"> 
<tttle>SampLe</t1tle> 
<Scrtpt src="]S/saqmple.]S"></SCrtDt> 
</head> 
<body> 
<h1>HTML5 Video</h1> 
<vtdeo src="movte/sample .mp4" controls></vtdeo> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 
wtndow .qddEventListener("1oad" ,。 functton()+ 
// vtdeo 要 素 を 読み 出す 
var video0b] = document.getELementsByTagName("vtdeo")[9]: 
// 映像 に イベ ント リス ナー を 設定 
video0b] .addEventLtstener("ended", functton()+ 
var flgg = confirm(" 再 生 が 終了 し まし た 。 再度 再生 し ます か ? "): 
tf (flag === true)+ 
// 再生 時 間 を 9( 最 初 ) に 設定 する 
thts.currentTtme = 0 の : 
// 再生 する 
thts .pLqy(): 
} 
+,。 faqtse): 
+, false): 
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mg コ ECTIHN-2 昌 4 mW 映像 の 再生 が 終了 し た 際 の イベ ント を 取得 する 

プラ ウザ で index.html を 表示 し 、 オー ディ オ の 再生 が 終了 する と 再生 を 再度 、 行う か どう か 
の ダイ アロ グ が 表示 され ます 。 | は い 」 ボ タン を クリ ッ ク す る と 再度 、 映像 が 再生 され 、「 い い ぇ | 
ボタ ン を クリ ッ ク す る と そこ で 再生 は 終了 し て 元 の 画面 に 戻り ます 。 

回 

HIIMILS Video 


9⑫ 再生 が 終了 し まし た 。 再度 再生 し ます か ? 





mamli 正 映像 の 再生 が 終了 し た ら 処 理 す る に は 「ended」 イ ベン ト を 使う 


HTMLS Video で は 、 再生 が 終了 する と | ended」 イ ベン ト が 発生 し ます 。 ゲー ム の よ 
うに オー プ ニ ン グ で 映像 の 再生 が 終了 し た ら 他 の ペー ジ に 移動 し た り 、 次 の 処理 を 行っ 
た りす る 場合 に 利用 で きま す 。 た だ し 、 映像 で 繰り 返し 再生 を 行う 「loop」 属 性 が 設定 さ 
れ て いる と 、| ended」 イ ベン ト は 発生 し ませ ん 。 な お 、 Firefox で は [loop」 属 性 を 設定 し 
て る 無効 な の で 、 常に 「 ended」 イ ベン ト が 発生 する こと に な り ま す 。 Firefox で 繰り 返し 再 
生 す る 場合 は 、| ended」 イ ベン ト を 検知 し た ら 「currentTime 」 プロ パテ ィ に 「0」 を 設定 
し 、 再度 、| play ) 」 メ ソ ッ ド を 使っ て 最初 か ら 再 生 す る 必要 が あり ます 。 

Opera 12 で は 、 ユー ザー が コン トロ ー ラ ー を 操作 し て 再生 時 間 を 変更 し た 場合 、 
| ended」 イ ベン ト が 2 回 発生 し ます 。 










関連 項目 ょ 


まみ イベ ント / \ ン ドラ を 設定 する KA に 1 も リス さて す テア すす て すま を すす すす か も も 全 サザ か サザ も 3 お 3 1 D.396 
KJ 7 導 二 04 は 。 く tys td7 て ECSGC8CSy2Z い eoGG 2 p.398 
し し だ に 光 1 主 ・ の Or PP fP だす 9 時 や PR 人 p.639 
『 映像 の 再生 時 の イベ ント を 取得 する が 河合 光電 (5 届 (268 4 9e な 4 し aa D.66 ] 
きま 映像 の ポリ ュー ム が 変更 され た 際 の イベ ント を 取得 する る ある 滞る 4 ee ev D.665 


LIE9 Chrome 』 Safari 5 | Firefox 4 Opera 11 





EE ヒビ TIHN- ど 5 ら 


映像 の ボリ ュー ム が 人 変更 され た 隊 の イベ ント を 
取得 する 
ここ で は 、 ビ デオ の ボリ ュー ム が 変更 され た 際 の イベ ント を 収録 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sqgmple</t1tle> 
<SCrtDt src="]S/sample.]S"></SCrtpt> 
</head> 
<body> 
<h1>HTML5 Video</h1> 


<video src="movte/sample.mp4" controlts loop></vtdeo> 


<br> 
<output> ボ リュ ー ム を 変更 し て くだ さい </output> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("1Logd"。 functton()+ 
var ele = document.getEtLementsByTagName( "output")[9] : 
// ビデオ 要素 を 読み 出し 
var qudto0b] = document.getEtLementsByTagName( "vitdeo")[9]: 
// ビデ オ 要 素 に イベ ント を 割り 当て る 
audto0b] .qddEventListener("votlumechange" , functton()+ 
// ボリ ュー ム を 読み 出し 
var n = qudto0b] .volume: 
// ボリ ュー ム が 変更 され た こと を 示す メッ セー ジ を 表示 
ele.innerHTML = "ボリ ュー ム が "+n+" に 変更 され まし た ": 
+。 fatse): 
}, false): 
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mm 王 ビ ビビ TI ロロ N-2 日 映像 の ボリ ュー ム が 変更 され た 際 の イベ ント を 取得 する 


ブラ ウザ で index.html を 表示 し 、 コン トロ ー ラ ー の ボリ ュー ム ス ラ イダ ー を ドラ ッ グ する と 、 リア 
ル タ イ ム に 変更 され た ボリ ュー ム の 値 が 表示 され ます 。 





ボリ ュー ム を 変更 し て くだ さい 






ボリ ュー ム が 0.479999989271 16394 に 変更 され まし た 





ポリ ュー ム 変 更 時 の 処理 を 行う に は 「volumechange」 イベ ント を 使う | 








HTML5 Video で ボリ ュー ム ( 音 量 ) が 変更 され る と 、「volumechange」 イ ベン ト が 発生 
し ます 。| volumechange」 イ ベン ト が 発生 し た 後 の ボ リュ ー ム の 値 は 、 変更 後 の も の に な 
り ま す 。 ボリ ュー ム の 値 は |00」 一 |1.0] ま で の 範囲 の 小数 値 に な り ま す 。 

な お 、 ス マー ト フ ォ ン Phone/iPad/Android ) で は 本 体 の ボリ ュー ム を 変更 し て も 、 


| volumechange」 イ ベン ト は 発生 し ませ ん 。 








纏い 23h い 25cs45 い ores20rtYMMM2EtSAA40428049K0Z742 222 た 4 p.396 
2 が よー な 重宗 の スバ ーー ckVe YS fc の Le 8 D.398 
@ 映像 の ボリ ュー ム を 設定 ・ ミ ュー ト す る 上 … つ ll …ー バ (oe D.649 
ゅ 有人 和 像 の 再生 時 の イベ ント 到 得する や ーー ドド 人 い r23K0mrotvoe 4c212008 p.66 ] 
e 映像 の 再生 が 終了 し た 際 の イベ ント を 取得 する 上 …ti 太 …… 〇 つ 人 ( そ 必 人 QCe い ーー ドド ドド ーーー…… p.663 


=1 コ iglmlN ロ 1=!= 
カメ ラ か ら の 映像 を 表示 する 


ここ で は 、 WebRTC を 使っ て カメ ラ 映像 を 表示 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metq charset="utf-8"> 
<tttle>SampLe</t1tle> 
<SCPr1Dpt src="]S/sample.]S"></SCr1Dt> 

</head> 

<body> 
<h3> カ メラ 映像 を 表示 </h3> 
<vtdeo width="329" hetght="249" qutopLay></v1deo> 
<OUtDut></OutDUut> 

</body> 

</html> 


JavaScript の コー ド (sample.jS) 


wtndow.aqddEventLtstener("1ogd"。 functton()# 
// 映像 と 音声 の 両方 を 再生 。 
navtgator .webkttGetUserMedia({ video : true, qudto: true }, 
// 処理 で きる 場合 
functton(stregm)1{ 
// スト リー ム 了 映像 を 表示 する video 要 素 
var myVtdeo = document.getElementsByTagName("vtdeo")[9]: 
// video 要 素 の src プ ロ パ ティ に スト リー ム を URL に 変換 し た 後に 代入 
// Firefox の 場合 は wtndow、URL .create0bjectURLC) 





myVitdeo.src = webkttURL .createOb]ectURL(Cstream): 

}, 

// エラ ー の 場合 

functton(error){ 
var ele = document .getEtLementsByTagName( "output")[ の ] 
ele.itnnerHTML = "エラ フラー:"+error .code: 

} 

う : 
}, false): 


回 加 周回 - 5 "すこ 8 m の 
サン プル の 動作 は 、 ネッ トワ ー ク 環境 (Web サ ー バ ー 上 ) で 確認 し て くだ さい 。 また 、 Oprera 
Mobile で の 動作 に つい て は 、 669 ペ ー ジ の コラ ム を 参照 し て くだ さい 。 


PIDSM ILH/OSDI 八 /OID「IV EEEM4 ミ 


ブラ ウザ で index.html を 表示 し 、 ペー ジ が 表示 され る と 、 カメ ラ か ら の 映像 が 取り 込ま れ て 
表示 され ます 。 
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生 ビビ ピロ 丁 | 口 N -2 日 呈 m カメ ラ か ら の 映像 を 表示 する 





miiamli 引 カメ ラ 映 像 を 表示 する に は WebRHTC API を 使う 


カメ ラ 映 像 を 表示 する に は 、 WebRTC API を 使い ます 。 カメ ラ 映像 を 取得 する に は 、 
| navigator」 オ プ ジ ェ クト の | getUserMedia() 」 メ ノッ ド を 使い ます 。「getUserMedia 
() メソッド の 最初 の パラ メー タ は 、 取得 する デバ イス の 種類 を 指定 し ます 。 古い 仕様 
で は 、| video, audio 」 と し て 文字 列 で 指定 し ます 。 新しい 仕様 で は 、「] videortrue. 
audiofalse |] と し て オプ ジェ クト リテラ ル 形 式 で 指定 し ます 。 

| getUserMedia () 」 の 2 番目 の パラ メー タ に は 、 デバ イス か ら の 入力 に 成功 し た 際 に 
呼び 出す 関数 を 指定 し ます 。 3 番目 の パラ メー タ に は 、 失敗 し た と き に 呼び 出す 関数 を 指 
定 し ます 。 

デバ イス か ら の 人 力 に 成功 し た 場合 、 関 鍵 に は スト リー ム デ ー タ が 渡さ れ ま す 。 た だ 
し 、 この まま で は 「 video」 要素 に 映像 を 表示 する こと は で きま せん 。 映像 と し て 表示 する 
に は 、| createObjectURL() 」 メ ノッ ド を 利用 し ます 。「createObjectURL () 」 メ ソ ッ ド で 
URL 形式 に 変換 し た 後 、「video」 要 素 の 「src」 プ ロッ パテ ィ に 代入 する こと で カメ ラ 映 像 
が 表示 され ます 。 た だ し 、「video」 要素 に 「autoplay」 属 性 ([autoplay="autoplay」) 
が 指定 され て いな い 場 合 は 、 最初 に 取り 込ま れ た 1 フレ ー ム の 映像 だ けが 表示 され ます 。 
|「 autoplay」 を 指定 する こと で 、 リア ル タ イ ム に カメ ラ 映 像 を 表示 する こと が で きま す 。 
な お 、 サン プル で は ベン ダー プレ フィ ックス (webkit) を 付加 し て いま す 。 


ma 軸 四 2 に 回 較 (OO0EIB ChrOme で の 設定 


| getUserMedia() 」 メ ソ ッ ド (実際 に は 「navigator.webkitGetUserMedia() | メソ ッ 
ド ) が 存在 し な い 場 合 は 、 アド レス 欄 に 「aboutiHags 」 と 入力 し て 、 設定 画面 で 「Media 
Stream」 を 有効 に し て くだ さい 。 設定 後 、 再起 動 す る と 、「getuserMedia() 」 メソッド を 
利用 する こと が で きる よう に な り ま す 。 





















司 ビ ピ T| 口 N -2 日 6 m カメ ラ か ら の 映像 を 表示 する 


mm 半 邊 2 上 較 (DDT MODile6 で の WebRTC 


WebRTC は 、 Opera Mobile で も 利用 する こと が で きま す 。 Opera Mobile の 場合 、 
「navigator 」 オブ ジェ クト の | getUserMedia() 」 メソ ッ ド を 使っ て リア ル タ イ ム に 映像 を 
表示 する こと が で きま す 。 実際 の TavaScript の コー ド は 、 次 の よう に な り ま す (HTML に 
つい て は 、 サン プル と 同じ ) 。 





wtndow.aqddEventLtstener("tLogd" 。 functton(){ 
// 映像 と 音声 の 両方 を 再生 
navtgator . getUserMedta("v1deo, qud10", 
// 処理 で きる 場合 
functton(stream){ 
// スト リー ム 映 像 を 表示 する video 有 要素 
var myVideo = document.getEtementsByTagName( "video")[9] : 
// 0perg Mobttle で は video 要 素 の srcc プ ロ パ ティ に スト リー ム を 入れ る 
myV1deo.Src = Stream: 
}。 
// エラ ー の 場合 
functton(error)+ 
var ele = document .getEtementsByTagName( "output")[9] : 
ele.tnnerHTML = "エラ ー:"+error.code : 
} 
): 
+, faqlse): 


Opera Mobile で index.html を 表示 する と 、 ペー ジ が 表示 され る と 、 カメ ラ か ら の 映像 
が 取り 込ま れ て 表示 され ます 。 


www.oPenspc2.org/ 衣 








関連 項目 ゅ 
@ カメ ラ か ら の 映像 を Canvas に 描画 する 生涯 か Ca は と の を D.670 
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SPIE IN コー 回 / 


カメ ラ か ら の 映像 を Canvas に 描画 する 








ここ で は 、 WebRTC を 使っ て カメ ラ 映 像 か ら 取 り 込 ん だ 映像 を Canvas に 描画 する 方 法 に 
つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>Sqmplte</t1t1e> 
<SCrtDt src="]S/sqmple.]S"></scrtDt> 
</head> 
<body> 
<h3> カ メラ 映像 を Canvas に 取り 込む </h3> 
<for> 
<tnput type="button" vaqtue=" 了 取り込み" id="cqpture"> 
</form> 
<vtdeo width="329" hetght="249" gutoptgy></vtdeo> 
<canvaSs wtdth="329" hetght="249"></cqnvas> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


window.qddEventLtstener("togd"。functton(){ 
// 映像 と 音声 の 両方 を 再生 
navtgotor .webkttGetUserMedta({ vtdeo : true, qudto: true }, 
// 処理 で きる 場合 
functton( stregm){ 
// スト リー ム 了 映像 を 表示 する video 要 素 
Var myVtdeo = document.getEtementsByTagName( "video")[9] : 
// video 要 素 の src プ ロ パ ティ に スト リー ム を URL に 変換 し た 後に 代入 
myVideo.src = webkittURL .createOb]ectURLCstregm) : 
}, 
// エラ ー の 場合 
functton(error){ 
var ele = document.getElementsByTagName( "output") う [の] : 
ele.innerHTML = "エラ ー:"+error.code: 
} 
): 
// WebRTC で 取り 込ん だ 映像 を Canvas に 描画 
document .getElLementById("capture").addEventLtstener("cttck"。 functton(){ 
Var myVtdeo = document.getEtementsByTagName( "video")[9] : 


ビビ ロロ T| 口 軸 -2 日 プ W カメ ラ か ら の 映像 を Canvas に 描画 する 


var myCanvas = document.getElementsByTqggName("canvas")[9] : 4 
var context = myCanvos .getContext("2d"): 
context.fitlLStyle = "whtte": 
context.ftlLRect( の 9.9, myCanvas .w1dth, myCanvas . hetght): 
context .drawTmage(myVtdeo, 49, 49, 249, 169): 
す , true): 
}, false): 


HINIT| る [ っ > co 
サン プル の 動作 は 、 ネッ トワ ー ク 環境 (Web サ ー バ ー 上 ) で 確認 し て くだ さい 。 また 、 Oprerga 
:。 Mobile で の 動作 に つい て は 、 669 ペ ー ジ の コラ ム を 参照 し て くだ さい 、。 


ブラ ウザ で index.html を 表示 する と 、 ペー ジ が 表示 され る と 、 カメ ラ か ら の 映像 が 取り 込ま 
れ て 表示 され ます 。 





IDB 1 TH/OSDI 八 /OID「IV 作 こ に まき に 4 ミ ピ 」 
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司 ビビ ピロ T| 口 NN -2 日 プ w カメラ か ら の 映像 を Canvas に 描画 する 


還 ま カ メ ラ 映 像 を CanvaS に 描画 する に は 「drawlmage()」 メ ソ ッ ド の 
最初 の パラ メー タ に 「video」 要 素 を 指定 する 


カメ ラ 映像 を Canvas に 描画 する に は 、|「drawImage () 」 メ ソ ッ ド の 最初 の パラ メー タ に 、 
映像 が 表示 され て いる | video」 要 素 を 指定 し ます 。 そ の 際 、|video」 要素 に は 「autoplay 」 


属性 が 指定 され て いな いと 、 リ アル タイ ム に 映像 を 描画 する こと が で きま せん 。 また 、 映像 
を Canvas に 反 画 する 場合 は 、Canvas の 内 容 を 消去 (も $ し く は 特定 色 で 描画 ) し て お か な 
いと 、 以 前 の 映像 が 残っ た まま 、 次 の 映像 が 描画 きれ な いこ と が あり ます 。 


miml 融 に 上 較 (OOOEIB ChrOme で の 設定 


| getUserMedia 0 」 メ ノッ ド ( 実 際 に は 「navigator.webkitGetUserMedia () 」 メ ソ ッ 
ド ) が 存在 し な い 場合 は 、 アド レス 欄 に | about:fHags」 と 入力 し て 、 設定 画面 で 「Media 
Stream」 を 有効 に し て くだ さい 。 設定 後 、 再起 動 す る と 、「 getuserMedia () 」 メ ノッ ド を 
利用 する こと が で きる よう に な り ま す 。 










関連 項目 ょ ぁ 


を バラ か らら の 時 像 な 琶 示す あ に ED48cee eo スッ YY 2670052S2 p.667 





=1 コ aglmlN ン 1=!= 
カメ ラ で 撮影 し た 画像 を 表示 する 


ここ で は 、 HTML Media Capture を 使っ て カメ ラ で 撮影 し た 画像 を 表示 する 方 法 に つい 
て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<mieto charset="utf-8"> 
<tttle>SamplLe</tttle> 
<SCrtDpt src="]S/Ssample.]S"></SsCr1Dt> 
</head> 
<body> 
<h3> カ メラ 画像 を 取り 込む </h3> 
<form> 
<tnput type="ftle" 1d="cCamData" qcCCeDt="1made/*・CQDtUPe=Camera"> 
</form> 
<tmg Src="1mages/dummy . ]P9′ 1d="myPhoto" width="499" hetght="320"> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . qaddEventLtstener("1oqd" 。 functton()+ 
document .getEtementById( "caqmData").qddEventLtstener("change" , functton(){ 
// 撮影 し た 画像 ファ イル 読み 込む た め の オ プ ジ ェ クト を 生成 
var reqder = new FtleReader(): 
// 画像 の 読み 込み が 完了 し た 時 の 処理 
reader.onload = functton(Cevt){ 
// カメ ラ 画 像 を src プ ロ パ ティ に 入れ る 
document .getElementById( "myPhoto").src = reader.result: 
} 
// カメ ラ で 撮影 し た 画像 デー タ を 指定 し て 読み 込ま せる 
var tmageFtle = document.getElLementById("cqmData").fites[ の ] : 





PIDS ILH/OSDI 八 /OID「1V に に に 4 ミ 


reader . readAsDataURL(1mageFtle): 
+, faqlse): 
+。 faqlse): 


LNI Po “ 
この サン ブル は 、 スマ ー ト フォ ン を 対象 と し て いま す 。 
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き 王 ビ ピロ T| 口 N| - 2 日 日 mW カメ ラ で 撮影 し た 画像 を 表示 する 


ブラ ウザ で index.html を 表示 し 、| ファ イル 選択 」 ボ タン を クリ ッ ク す る と 、 カ メラ が 起動 し ます 。 


ファ イル を 寺 択 イル が 拓 所 さ れ て 」 





カメ ラ で 撮影 する と 、 撮影 し た 画像 が ペー ジ 上 に 表示 され ます 。 


カメ ラ 画 像 を 取り 込む 


. フ ァイル を 選択 」3。 30550875.jpg 





BIDS ILH/OSDI 八 /OIDTIV に EEESEE4 ェ IP 





674 


W 呈 ビ ロ | 口 N| -2 日 日 m カメ ラ で 撮影 し た 画像 を 表示 する 


ョ ml ョ = 引力 メ ラ で 撮影 し た 画像 を 表示 する に は HTML Media Capture を 使う 


HTML Media Capture を 使え ば 、 簡単 に カメ ラ で 撮影 し た 画像 を 表示 する こと が で 
きま す 。 ま ず 、「input」 要素 の | type」 属 性 に [file」 を 指定 し 、|「 accept」 属 性 に | mage/ 
※:capture=camera 」 の 文字 を 指定 し ます 。 これ で ファ イル アッ プロ ー ド ボタ ン を クリ ッ ク 
する と 、 カメ ラ で の 振 影 が 可能 に な り ま す 。 

カメ ラ で 撮影 し た 画像 を 処理 する に は 、File API を 利用 し ます 。| FileReader」 オ ブ 
ジェ クト を 作成 し 、「readAsDataURL() 」 メ ノッ ド を 使っ て カメ ラ で 撮影 し た 画像 を 読み 
込ま せま す 。 画像 デー タ の 読み 込み が 完了 し た ら 、|img」 要素 の | src」 属 性 に 和信 れ ま 
す 。 これ で カメ ラ で 撮影 し た 画像 が ペー ジ 上 に 表示 され ます 。 

な お 、 2012/7/12 の 仕様 で は 、 取り 込み デバ イス の 指定 は 、| accept」 属 性 で は な く 、 
[capture」 属 性 に 指定 する よう に な っ て いま す 。 

HTML Media Capture に つい て は 、 次 の URL を 参照 し て くだ さい 。 
http://WWwW.W3.org/TRH/htmlmedia-capture/ 


mm 融 IN 較 ビ ナ テオ カメ ラ と マイ ク か ら の 取り 込み 


ビデ オカ メラ か ら 取 り 込 む に は 、 次 の よう に 「accept」 属 性 を 指定 し ます 。 























<tnput type="ftte" gccept="vtdeo/*:Capture=CammCoder "> 
マイ ク か ら 取 り 込 む に は 、 次 の よう に 「 accept」 属 性 を 指定 し ます 。 


<tnput type="ftte" qccept="audto/*:Capture=mtCrophone "> 


mimlBIIN 議 [CaDtUTG」 属性 に 指定 で きる 値 


2012/7/12 時 点 で の 仕様 で は 、| capture」 属 性 に は 、 次 の 値 を 指定 で きる こと に な っ 
て いま す 。 


カメ ラ 
ビデ オカ メラ 


Ia 
ファ イル (ロー カル に ある ファ イル ) 





失 放 下 下 三 還 2 


1 カメ ラ で 撮影 し た 画像 を Canvas に 描画 する は 08 ん 0 3 人 0. D.676 





EIDS ]N1H/OgDpI ハ /OIpny 語 時 NZ5E 
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glDS ]W1H/OepIA/olpnv 計 語 で SF は 
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ご 1 = 英和 箇 昌男 ゆあ ン イー トー, 


カメ ラ で 撮影 し た 画像 を Canvas に 描画 する 





ここ で は 、 HTML Media Capture を 使っ て カメ ラ で 撮影 し た 画像 を Canvas に 描画 方 法 
に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<Weta charset="utf-8"> 
<titte> Sample</t1t1e> 
<SCr1Dt Src="]s/sqmple .]S"></SCP1Dt> 
</hegd> 
<body> 
<h3> カ メラ 画像 を 取り 込む </h3> 
<form> 
<tnput type="ftle" 1d="comData" qccept="1mage/*・Capture=Camer"> 
</form> 
<canvas 1d="myCanvas" wtdth="499" hetght="329"></caqnvas> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oad"。 functton(){ 





document . getELementById( "camData").qddEventLtstener("change", functton(){ 
// 撮影 し た 画像 ファ イル 読み 込む た め の オ プ ジ ェ クト を 生成 
var reqder = new FtleReader( ): 
// 画像 の 読み 込み が 完了 し た 時 の 処理 
reader.onload = functtonCevt){ 
// Image オ ブ プ ジ ェ クト を 作成 
var tmg = new Image(): 
// 画像 デー タ の 読み 込み 完了 時 に Canvas に 描画 
tmg.Oontogd = functton()+ 
var caqnvasOb] = document.getELementBy1d( "myCanvas"): 
var context = caqnvasOb] .getContext( "2d") う : 
context.drawImage(thts 9, の 9, 499, 329): 
} 
// カメ ラ 画 像 を src プ ロ パ ティ に 入れ る 
1mg.SrC = reader.reSult: 
} 
// カメ ラ で 撮影 し た 画像 デー タ を 指定 し て 読み 込ま せる 
var tmageFtle = document.getElLementByTd( "caqmData").fttes[9] : 
reader .readAsDataURL(1tmageFile): 
}, false): 


生 王 ビ ビビ ピ T| 口 NN -2 日 紀 m カメ ラ で 撮影 し た 画像 を Canvas に 描画 する 
+, faqtse): 記 4 


国貞 加 思 … 


この サン プル は 、 スマ ー ト フォ ン を 対象 と し て いま す 。 


ブラ ウザ で index.html を 表示 し 、「 フ ァイル 選択 」 ボ タン を クリ ッ ク す る と カメ ラ が 起動 し ます 。 


カメ ラ 画 像 を 取り 込む 


ファ イル を 選択 


ファ イル が 選択 され て ! 








カメ ラ で 振 影 する と 、 撮 影 し た 画像 が Canvas に 搬 画 され ます 。 


Ll 


カメ ラ 画 像 を 取り 込む 


ファ イル を 選択 」33。」3276796 jp。 
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ヒビ TI ロロ N-2 日 9 mW カメ ラ で 撮影 し た 画像 を Canvas に 描画 する 


カメ ラ で 撮影 し た 画像 を Canvas に 描画 する に は 「Image」 オ ブ ジ ェクト の 
「onload] プロ パテ ィ に イベ ント ハン ドラ を 設定 する 


カメ ラ で 撮影 を 行う に は 、|「input」 要素 の |type」 属 性 に | file」 を 指定 し 、| accept」 属 
性 に | image/*:capture=camera 」 の 文字 を 指定 し ます 。 これ で ファ イル アッ プロ ー ド 
ボタ ン を クリ ッ ク す る と 、 カメ ラ で の 撮影 が 可能 に な り ま す 。 

カメ ラ で 撮影 し た 画像 を 処理 する に は 、 File API を 利用 し ます 。「 FileReader 」 オ ブ 
ジェ クト を 作成 し 、「readAsDataURL() 」 メ ノッ ド を 使っ て カメ ラ で 撮影 し た 画像 を 読み 
込ま せま す 。 画 像 デー タ の 読み 込み が 完了 し た ら 、| Image」 オ ブ ジ ェクト を 生成 し 、| src」 
プロ パテ ィ 読 み 込 ん だ デー タ を 入れ ます 。 画像 デー タ は 非同期 で 読み 込ま れる た め 、 直 
後に | drawImage ( 」 メ ソ ッ ド を 使っ て Canvas に 描画 し よう と し て も デー タ が な いた め 何 
ゃ 捕 画 され ませ ん 。 そこ で 、 画像 デー タ の 読み 込み が 完了 し た ら 、 Canva に 描画 する よ 
うに し ます 。 これ は 、| Image」 オ プ ジ ェ クト の | onload」 プ ロ パ ティ に イベ ント ハン ドラ を 設定 
し ます 。 イベ ント ハン ドラ 内 で | drawImage (0 」 メ ノッ ド を 使っ て 、 カメ ラ で 撮影 し た 画像 を 
Canvas 上 に 捕 画 し ます 。 


関連 項目 


ce メタ の 半 叉 | た 机 佐 を 代 寺 2 p.673 
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ュー テー ンー 

dy AS 0 
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LChrome 』 Safari 5 | Firefox 4 1 Opera 11 


ら ED じ TIN- の 9 曲 


ファ イル 名 や 種類 を 取得 する 


ここ で は 、 ファ イル 名 や 種類 を 取得 する 方 法 に つい て 解説 し ます 。 
ド HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<metqa charset="utf-8"> 
<title>Sampte</ttt1e> 
<SCrtpt Ssrc="]S/sample.]S"></scrtpt> 
</head> 
了 oe 


<form> 








ら ロ 


ロ <p><tnput type="fitte" 1d="selFite" multiple></p> 
"| <tnput type="button" value=" チ ェ ッ ク " id="checkBtn"> 


ロ マ form 
| < く OUtDut></OutDut> 
2 </body> 
| </html> 


ロ ] JavaScript の コー ド (sample.js) 


ーー window.addEventLtstener("1ogd" 。 functton(){ 
4 var ele = document.getElLementsByTagName( "output")[9]: 
が // ボタ ン に イベ ント を 設定 
document .getEtLementByTd("checkBtn").qddEventListener("ctick"。functton(){ 
var ftleLtst = document.getElLementByIdC"selFite").fttLes: 
// 選択 され た ファ イル 数 
var totol = fileLtst.1Length: 
ete.innerHTML = "選択 され た ファ イル 数 :"+total+"<br>": 
// 選択 され た ファ イル 数 だ け 繰 り 返し 情報 を 表示 
ー| forCvar t=0: t<totati i++){ 
ィ // ファ イル 名 を 読み 出し 
ele.innerHTML += "ファ イル 名 :"+fiteLtst[i] .name+"<br>": 
// ファ イル サイ ズ を 読み 出し 
ele.tnnerHTML += "サイ ズ :"+fiteList[i] .stze+" バ イト <br>": 
// 種類 を 読み 出し 
ele.innerHTML += "種類 :"+fiteLtst[1] .type+"<hr>": 
} 
+, false): 
}, faqlse): 





|IV 9 に に 上 こ by ミト | 
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m 王 ビ ロロ TI 口 N - つ ロ m ファ イル 名 や 種類 を 取得 する 


プラ ウザ で index.html を 表示 し 、 ファ イル 選択 ボタ ン を クリ ッ ク す る と 、 ファ イル を 選択 する ダ 
イア ログ が 表示 され ます 。 








次 お 気に入り 
論 ダウ ン ロ ー ド 
還 デス クト ッ プ 
斑 最近 表示 し た 場 有 | 


記 ライ ブラ リ 
園 ドキ ュ メ ント 
編 ビク チ ヤ 
用 ビデ オ 
ゆ ミュ ー ジ ッ ク 


* 裕 コン ピュ ー タ ー 


ファ イル 0O: OO5 mo 





| 


Sample 
⑤ 


3@|A 
っ zi 上 沢 | 4 ファ イル 


IdV 9 に に ETEE に 48 


選択 され た ファ イル 数 : 4 
ファ イル 名 :0005 jpg 
サイ ズ :37009 バ イト 

短 類 : Image/ jpeg 





ファ イル 名 : map.html 

サイ ズ :2129 バ イト 

種類 : tsxt/html 

ファ イル 名 : 解説 も tt 
サイ ズ :241 バ イト 
本 類 : tex/ plain 
ファ イル 名 : 釜 ロ 水 n moV 
サイ ズ : 191502901 バ イト 
棒 類 : vdeo/qucktime 








681 


還 ビビ TI ロロ NI - つ 9 ロ 生 ファ イル 名 や 種類 を 取得 する 


ファ イル 情報 を 取得 する に は 「name」 プロ パテ ィ や 「size」 プロ パテ ィ 、 
[tyDpe」 プロ バテ ィ を 使う 


ファ イル 情報 を 取得 する に は 、 次 の 表 に 示す ファ イル オブ ジェ クト の 各 プ ロ パ ティ を 参 
照 し ます 。 


ロロ NEPOINT 


ファ イル 名 (拡張 子 含む) 


| Size "| ファ イル サイ ズ ( バ イト 数 ) 
Ltype 


ファ イル 形式 (MIME タ イプ ) 


ファ イル オプ ジェ クト は 、 ファ イル アッ プロ ー ド ボタ ン に より 選択 きれ る か 、 ペー ジ 内 に ドラ ッ 
グ & ド ロッ プ さ れ だ た ファ イル が 「 名 les」 配 列 に 格納 され ます 。 

ファ イル オプ ジェ クト で 読み 出せ る の は 、 表 に 示す プロ パテ ィ だ け で 、 ファ イル の パス や 
デイ レク トリ な ど は 取得 する こと が で きま せん 。 








関連 項目 ルル と ST 
e ドラ ッ グ 要素 か ら ド ロッ プ 要 素 に デー タ を 渡す ………………- (0 二 人 90920 TSAth4zzis p.866 





IHV 9 EE に EEEN2 = ma 
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ssE も HHN・ の 9 


テキ スト ファ イル を 読み 込む 








ここ で は 、 ロー カル ファ イル に ある テキ スト ファ イル を 読み 込む 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>Sample</t1tle> 
<scrtpt src="]Ss/sample.]S "></SCr1Dt> 
</head> 
<body> 
<form> 
<p><tnput type="ftle" 1d="seLFtLe"></P> 
<tnput type="button" value=" 読 み 込み " 1d="readBtn"> 
</form> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window .qddEventListener("1ogd" 。 functton()+ 
var ele = document.getEtementsByTagName("output") う [の] : 
// ボタ ン に イベ ント を 設定 
document .getEtementBy1d("regdBtn" ) .addEventLtstener("cL1tcK" , functton(){ 





var fitleList = document.getEtementById("selFtle").ftles: 
// FiteReqader オ プ ジ ェ クト を 作成 

var regder = new FtleReader(): 

// テキ スト が 読み 込ま れ た 場合 の 処理 を 設定 


reader.ontoad = functton(evt){ 


ldV 9I | 本 還 Fm 


ele.tnnerHTML = evt.target.reSult: 


} 
// テキ スト ファ イル の 読み 込み を 開始 
reader.readAsText(fiteLtst[9] ): 
+, false): 
}, faqlse): 


LINEI 
ブラ ウザ に よっ て は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネッ トワ ー ク 環境 (Web 
サー バー 上 ) で 確認 し て くだ さい 。 


プラ ウザ で index.html を 表示 し 、 ファ イル 選択 ボタ ン を クリ ッ ク し て 、 テキ スト ファ イル を 選択 し 
ます 。 
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mm E ビ TIHN - ジ 9 1 昌 テキ スト ファ イル を 読み 込む 


Sample 
-。 回 


選択 され て いま せん 


宮 お 気に入り 
ダウ ン ロ ー ド 目 
還 デス クト ッ プ 
誤 最近 表示 し た 


話 ライ ブラ リ 
放 ドキ ュ ユメ ント 
細 | ピク チャ 

許 ビデ オ 





ます 。 


これ は テキ スト ファ イル で す 。 FileReader を 使っ て 読み 
せる こと が で きま す 。 


mmm 邊 テキ スト ファ イル を 読み 込む に は 「readAsText()」 メソ ッ ド を 使う 





テキ スト ファ イル を 読み 込む に は 、| FileReader」 オ ブ ジ ェクト の 「readAsText() | メソ ッ 
ド を 使い ます 。「readAsText() | の パラ メー タ に 選択 され た ファ イル オブ 人 定 し 
ます 。 | readAsText() 」 の 2 番目 の パラ メー タ は 、 テキ スト ファ イル の 文字 コー ド を 指 人 
ます 。 目 動 的 に 文字 コー ド を 認識 させ る 場合 に は 、 省略 し ます 。 Ft 
の 文字 コー ド が 決ま っ て いる 場合 の み 、 2 番目 の パラ メー タ を 指定 する 方 が よい で し ょ う 。 

テキ スト ファ イル の 読み 込み が 完了 する と 「load」 イベ ント が 発生 する の で 、[File 
Reader」 オ プ ジ ェ クト の 「onload」 に イベ ント ハン ドラ を 設定 し 、 読み 込み 完了 時 の 処理 を 
行い ます 。 な お 、 フ ァイル サイ ズ が 大 きい 場合 に は 、 プ ラウ ザ が 停止 状態 に な る こと が あり 
ます 。 イベ ント ハン ドラ に は イベ ント オブ ジェ クト が 渡さ れ 、「target」 オ プ ジ ェ クト の 「result | 
プロ パテ ィ に 読み 込ま れ た テキ スト デー タ が 入り ます 。 





IV 9 REIIEN2=a 





関連 項目 ゅ 
と 珍重 D 3 p.685 
対す p.687 
@ ファ イル の 読み 込み 状況 を 表示 する 上 …① ぬ 〇 バ (ロバ … ム ーー バー に ーー いい いら ーー…… p.689 
ゅ @ ド ラッ グ 要 徐 か ら ド ロッ プ 要 系 に デー タ 左 渡す 上 上 Wi バ …… ト ドド トー ドー トー ムー p.866 
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ニー】 = 昌 誠 上 1 四 に に レン ネ ニ ルン 


バイ ナリ ファ イル を 読み 込む 








こ で は 、 ロー カル ファ イル に ある バイ ナリ ファ イル を 読み 込む 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<heagd> 
<meta charset="utf-8"> 
<tttle>Saqmple</ttt1e> 
<SCrtpt src="]s/sample .]S "></SCPtDt> 
</head> 
<body> 
<form> 
<P><tnput type="file" 1d="selFtLe"></DP> 
<tnput type="button" vatue=" 読 み 込 み " 1d="readBtn"> 
</form> 
<OutDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .qddEventListener("1Loqd"。 functton(){ 
var ele = document .getEtementsByTagName( "output")[9] : 
// ボタ ン に イベ ント を 設定 
document .getEtementById("regdBtn").qddEventLtstener("clLtck" functton()t 





var fileLtst = document.getEtementById(C"selFtte").fttes: 
// FtleReader オ プ ジ ェ クト を 作成 

var reader = new FleReader(): 

// バイ ナリ ファ イル が 読み 込ま れ た 場合 の 処理 を 設定 


reader.ontoad = functton(Cevt)† 


IdV 9 に に に 4 se 


var btn = evt.target . result: 
// 最初 の 8 バイ ト を 表示 
for(Cvar 1=9: 1<8: 1 ユ ++) せ 
ele.tnnerHTML += bin.charCodeAt(1 ) .toStrtng(16)+"。": 
} 


reader.readAsBinaryStringCfiteLtst[9]): // バイ ナリ ファ イル の 読み 込み を 開始 
+, faqlse): 


+, faqlse): 


HINIT| ゃ w 央 2 が NIL CrVPe 人 PS 「 


ブラ ウザ に よっ て は 、 ロー た Yi 二 S その 場合 は 、 ネッ トワ ー ク 環境 (Web 
サー バー 上 ) で 確認 し て くだ さ 
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生 ビ ピ ロイ | 口 NN -2 ラ 2 m バイ ナリ ファ イル を 読み 込む 


プラ ウザ で index.html を 表示 し 、 ファ イル 選択 ボタ ン を クリ ッ ク し て 、 バイ ナリ ファ イル を 選択 し 
ます 。 











PPT 7 人 092090Y 人 Pe 本 uu 人 g 人 
『 



















次 お 気に入り ココ 名 凍 更新 日 時 電 
男 デス クト ッ プ し 」 Sample 2012/04/11 21:22 テキ スト 


市 屋 近 表 示し た 場 j 











記 ライ ブラ リ 
席 ドキ ュ メ ント 
ビク チャ 

議 ビデ オ 

ミュー ジマ クト 


ファ イル 名 (N): 0002 

















読み 込み ボタ ン を クリ ッ ク す る と 、 選択 され ん た バイ ナリ ファ イル が 読み 込ま れ 、 先頭 の 8 バイ ト が 
16 進 数 で 表示 され ます 。 






| 寺 み 込み | 
作 d8, 作 s0.0, 10. 4s. 46, 





バイ ナリ ファ イル を 読み 込む に は 
「readAsBinaryString()」 メソ ッ ド を 使う 


バイ ナリ ファ イル を 読み 込む に は 、| FileReader」 オ プ ジ ェ クト の 「readAsBinaryString() 」 
メソ ッ ド を 使い ます 。 | readAsBinaryString() 」 の パラ メー タ に 、 選 択 さ きれ た ファ イル オプ ジェ 
クト を 指定 し ます 。 

バイ ナリ ファ イル の 読み 込み が 完了 する と 「load」 イ ベン ト が 発生 する の で 、「FileReader | 
オプ ジェ クト の | onload」 に イベ ント ハン ドラ を 設定 し 、 読み 込み 完了 時 の 処理 を 行い ます 。 

イベ ント ハン ドラ に は イベ ント オプ ジェ クト が 渡さ れ 、「target」 オ プ ジ ェ クト の 「result 」 プ ロ 
パテ ィ に 読み 込ま れ た バイ ナリ ファ イル が 入り ます 。 バイ ナリ デー タ は 、 1 バイ ト が 1 文字 と し 
て 格納 され て いる た め 、| charAt() 」 メ ソ ッ ド や 「charCodeAt() 」 メ ソ ッ ド 、「substring() 」 
メソ ッ ド や |substr() 」 メ ソ ッ ド 、 正規 表現 な ど を 使っ て 処理 する こと が で きま す 。 


関連 項目 


II に IN ニ IPII に IE 





夫 : 和 2 の 詩 2 半 拉 拓 送 いん btyr16rrT eee28824y ら ecAE2212EAGEES4e92822 昌 3 p.683 
き 湖 座 き 陸 本 ワ ァイル な 本 洲 人 生 い の Gt に の 4000tht420M0c soaezp242AALe p.687 
まま ファイ POD 計 ゆめ 込 力 状 沈 友 義 示 する あー いい KuIzAK2 ル RA000en WW580Be 2 D.689 
に 5 いり /0 本 押 か ら ド Eh トッ プ 麻 業 に が ーー タ あ か 傍 生 い い の 0 凡 Me 人 いい hh p.866 


ED TIUN-2 ワ 9 コ 


画像 や 映像 ファ イル を 読み 込む 








こ で は 、 ロー カル ファ イル に ある 画像 や 映像 ファ イル を 読み 込む 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<tttte>SqmpLe</t1tle> 
<scrtpt src="]s/sample .]S"></SCrtDpt> 
</head> 
<body> 
<formW> 
<p><tnput type="fttle"' 1d="seLFtLe"></P> 
<input type="button" vaqlue=" 読 み 込 み " id="regdBtn"> 
</form> 
<tmg Src="1mages/dummy .Dn9g "> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window.addEventLtstener("1ogd" 。 functton(){ 
// ボタ ン に イベ ント を 設定 
document.getEtementById("regdBtn").addEventListener("cLtck" function(){ 





var fitleLtst = document.getEtementById("selFtle").ftles: 
// FiteReader オ ブ ジ ェクト を 作成 
var reader = new FtleReader(): 
// ファ イル が 読み 込ま れ た 場合 の 処理 を 設定 
reader.onload = functton(Cevt)† 
var data = evt.target.result: 
// img 要 素 の src に 代入 し 表示 
document .getEtLementsByTagName("1mg")[9] .src = dato: 
} 
// ファ イル の 読み 込み を 開始 
reader.readAsDataURLCfiteLtst[9]): 
+,。 fatse): 
}, faqlse): 


NT 
ブラ ウザ に よっ て は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネ ットワーク 環境 (Web 
サー バー 上 ) で 確認 し て くだ さい 。 


IdV 9|- に に まき 4 ミド 


ブラ ウザ で index.html を 表示 し 、 ファ イル 選択 ボタ ン を クリ ッ ク し て 、 画像 ファ イル を 選択 し ます 。 
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還 ヒビ ピロ T イ | 口 N-29 コ 3 m 画像 や 映像 ファ イル を 読み 込む 


騰 Sampe で 今 画 
を ぅ ふ @Q 


起 お 気に入り 


| 22M 粒 必 | 末 所 され て いま せん “ | 島 タ 5>o- ド | 


問 デス クト ッ プ 


周 ドキ ュ メ ント 

訪 | ピク チャ 

用 ビデ オ 

ミィ ー ジ w ク 
ファ イル 名 (N): 0005 


療 口 末 由 








画像 ファ イル や 映像 ファ イル を 読み 込む に は 
の 「readAsDataUHL()」 メソッド を 使う 


画像 ファ イル や 映像 ファ イル を 読み 込む に は 、「FileReader 」 オブ ジェ クト の 「read 
AsDataURL() 」 メ ソ ッ ド を 使い ます 。「readAsDataURL () 」 の パラ メー タ に 、 選択 され 
た ファ イル オブ ジェ クト を 指定 し ます 。 

画像 ファ イル や 映像 ファ イル の 読み 込み が 完了 する と 「load」 イ ベン ト が 発生 する の で 、 
| FileReader」 オ プ ジ ェ クト の 「onload」 に イベ ント ハン ドラ を 設定 し 、 読み 込み 完了 時 の 
処理 を 行い ます 。 

イベ ント ハン ドラ に は イベ ント オブジェ クト が 渡さ れ 、「 target」 オブ ジェ クト の 「result | プ 
ロ パ ティ に 読み 込ま れ た 画像 ファ イル や 映像 ファ イル が 「data: 一 」 形式 で 格納 され て いま 
す 。 dataURL 形 式 に な っ て いる の で 、 表示 する 場合 は 画像 や 映像 の 「src」 属 性 (プロ 
パテ ィ ) に 代入 し ます 。 







IdV 9 に き 半 =y4 = 









関連 項目 ょ ゅ 


み デ チキ ギ キス メト ファ イ 比 充 生 あ 2 込 き ne k が 2 が 2 SC 本 72000 お ws p.683 
りり 0 まう の イ 由 二 本 2 大 導い y の いこ の か a ッ ン ャ or ュー 人 40KG4222400E even402 が ed 4 eva 。 D.685 
$ ファ イ 比 の 読み 込み 状況 を 表示 する ーー ルル mo…… ド バム ーー バー ババ バー バツ トン pD.689 
e ド ラッ グ 要 系 か ら ド ロッ プ 要 和 泰 に デー タ を 渡す …………… ド ーー バー ババ ーーーーーーーー… p.866 
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=1 コ eglmlN ロ 1 ニア 
ファ イル の 読み 込み 状況 を 表示 する 


ここ で は 、 ファ イル の 読み 込み 状況 を 表示 する 方 法 に つい て 解説 し ます 。 
EPYX 下 天 本 妥 HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> に 
<hegd> 
<metq charset="utf-8"> ト 
<tttle>SampLe</t1t1le> 





<SCrtDt src="]S/sample .]S"></SCcrtpt> 0 
</head> | 
<body> 

<form> 

<P><tnput type="ftle"' 1d="selFtle"></P> 

<tnput type="button" vatue=" 読 み 込 み " 1d="readBtn"> 
</form> ーー 
<dtv><tmg Src="1mages/dummy.png' witdth="128" hetght="64"></d1V> 

<OUtDut> の </OutDut> ' ーーー 一 
</body> 

</html> 


JavaScript の コー ド (sample.jS) 


wtndow .aqddEventLtstener("Logd" 。 functton(){ | 
var ele = document .getELementsByTagName( "output")[9]: 
// ボタ ン に イベ ント を 設定 
document.getElementById("readBtn") .addEventListener("cltck"。functton()1 
var fitleLtst = document.getEtementById("setFtte").fttes: 
// FtteReader オ プ ジ ェ クト を 作成 
var reaoder = new FitleReqder(): 
// ファ イル が 読み 込ま れ た 場合 の 処理 を 設定 


reader.onlogd = functton(evt){ 





ldV 9 ETETZFm 


var datoa = evt.target . result: 
// img 要素 の src に 代入 し 表示 
document .getElementsByTagNagme( "1mg")[9] .src = data: 
} 
// 読み 込み 状況 を 表示 
reader .onProgresS = functton(evt){ 
// img 要 素 の src に 代入 し 表示 
ele.tnnerHTML = evt.toqded + "バイ ト 読 み 込 み ま し た ": 
} 
// ファ イル の 読み 込み を 開始 
reqder . readAsDataURLC(fileLtst[9] ): 
}, false): 
+, faqlse): 
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IdV 9 に まき WS =a 
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生 王 ビ ピロ T| 口 N - ラ 4 mw ファ イル の 読み 込み 状況 を 表示 する 


ブラ ウザ で index.html を 表示 し 、| ファ イル 選択 」 ボ タン を クリ ッ ク し て 、 画像 ファ イル を 選択 し 
ます 。 















直 お 気に入り 
電 ダウ ン ロ ー ド し coo < 宮 生生 284 生 oo いよ 
且 デス クト ッ プ 、) sample 2012/04/11 21:22 テキ スト 

局 二 務 表示 し た 















望 ライ ブラ リ 
ドキ ュ メ ント 

太 ビク チャ 

閣 ビデ オ 

了 ) ミュ ーシュ ク | 
ファ イル 名 (): oo02 " " -| 還 SGo2a 






。 っ 須 
吉山 


売 み 込み ]」 ボ タン を クリ ッ ク す る と 、 読み 込ん だ バイ ト 数 と 画像 が 表示 され ます 。 


31245 バ イト 読み 込み まし た 





mm 中 ファ イル の 読み 込み 状況 を 表示 する に は 「progress」 イベ ント を 使う 


ファ イル の 読み 込み 状況 を 表示 する に は 、| FileReader」 オ ブ ジ ェクト の 「progress」 イ 
ベン ト を 利用 し ます 。 イベ ント ハン ドラ に は 、 イベ ント オブ ジェ クト が 渡さ れ ま す 。 イベ ント オプ 
ジェ クト の 「loaded」 プ ロ パ ティ に 、 読み 込ま れ た ファ イル の バイ ト 数 が 入り ます 。 

進行 状況 を 割合 で 示し た い 場 合 に は 、 読み 込ま れ た バイ ト 数 を ファ イル の 総 バイト 数 
を 示す ファ イル オブジェ クト の 「 size」 プロ パテ ィ で 除算 し ます 。 また 、[ progress」 要素 を 
使っ て 進捗 状況 を 示す 方 法 も あり ます 。 









関連 項目 ょ ゅ 


の を トウ ウイ 1 症 議 内 入 mcikfotte eahcE1122082EPE 二 00MRI3WILTG 和 は 06Abywo。 p.683 
旨い ナナ P ル イル 十 放 2 久夫 Ne At7Kn の 22nex49M090KSCM2yt に 3204Stecy ut p.685 
赤 提 設 NN プ ポ 圭二 全休 0 の 9 な AveaiA2FIMM02PK7AAtttt4NErANR22Rh viy ea p.687 


LChrome_ Android4 


に 1IPgglmlN ロ ン t= に 
指定 し た ディ スク 容量 が 使用 可能 か 調べ 


ここ で は 、 指定 し た ディ スク 容量 が 使用 可能 か 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<hegd> 
<meta charset="utf-8"> 
<ttttle>SqmpLe</tttle> 
<SCrtpt src="]S/sample . ]S"></SCrtPt> 

</head> 

<body> 
<h3>Quotaq チ ェ ッ ク </h3> 
<Output>0</OutDut> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("1oagd"。 functton(){ 
var ele = document.getEtementsByTagName( "output")[9] : 
// 指定 し た 容量 を 確保 で きる か 調べ る 
wtndow.storageTnfo.requestOuota( 


// 種類 を 指定 (永続 的 か 一 時 的 か ) 





TEMPORARY, 

// 確保 する サイ ズ ( バ イト 数 )/196KB 確 保 で きる か ? + 
1924*100, ィ 
// 成功 時 の 処理 を 行う コー ル バ ッ ク 関 数 
functtonCbytes){ 4 

ele.tnnerHTML = bytes+" バ イト 分 は 使用 可能 で す ": 所 “ 

}, 了 ア 
// 失敗 時 の 処理 を 行う コー ル バ ッ ク 関 数 デー 
functton(Cerr)# 


etle.innerHTML = "エラ フラー! !<br>"+err.Ccode: 
} 
う : 
}, fatlse): 
// ベン ダー プレ フィ ックス も 考慮 


wtndow.storageInfo = window.storageInfo || wtndow.webkitStorqgeInfo: 


IM 帳 団 - 
Android で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 
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ms ビビ TI ロロ N -295 wm 指定 し た ディ スク 容量 が 使用 可能 か 調べ る 


index.html を Google Chrome で 表示 する と 、 使用 可能 な バイ ト 数 が 表示 され ます 。 





102400 バ イト 分 は 使用 可能 で す 





index.html を Chrome for Android で 表示 する と 、 使用 可能 な バ 條 数 が 表示 され ます 。 


| www_opensDC2.orq/ 


Quota チ ェ ッ ク 
1322082356 バ イト 分 は 使用 可能 で す 





IdV 9 に きこ に 2 ミト Fa 


SE 史 用 衣 な 割り 当て 容量 を 調べ る に は 
「window.storagelnfo.requestQuota()」 メソッド を 使う 


File API で は 、 使用 可能 な ディ スク 容量 を 確認 する こと が で きま す 。 調べ る に は 、. 
| window.storageInfo.requestQuota() 」 メソ ッ ド を 使い ます 。 最初 の パラ メー タ に は 、 
傘 の 表 に 示す 種類 を 指定 し ます 。 な お 、 文字 列 で は な く 、 プロ パテ ィ と し て 割り 当て られ 
て ます 。 











プロ パテ ィ ( 種 類 ) 説明 
TEMPORARY 
PERSISTENT 


「TEMPORARY」 は 、 一 時 的 な 保存 で 、 全体 的 な 保存 領域 が な く な っ た 場合 な ど に 
は 削除 きれ る こと が あり ます 。 た だ し 、 電源 を 落と し て も 保存 し た デー タ が 消え る わけ で は 
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m 選 ビビ TI ロロ N-295 ョ m 指定 し た ディ スク 容量 が 使用 可能 か 調べ る 


あり ませ ん 。 

2 番目 の パラ メー タ に は 、 バイ ト 数 を 指定 し ます 。 ここ で 指定 し た バ 條 数 が 確保 で きた 
場合 に 、 3 番 色 こ 指定 し た パラ メー タ ( コ ー ル バッ ク 関 数 ) が 呼び 出さ れ ま す 。 失敗 し た 場 
合 は 、 4 番 且 に 指定 し た パラ メー タ ( コ ー ル バッ ク 関 数 ) が 呼び 出さ れ ま す 。 

成功 時 に 呼び 出さ れる コー ル バ ッ ク 関 数 に は 、 確保 し た バイ ト 数 が 渡さ れ ま す 。 
Google Chrome で は 指定 し た サイ ズ よ り も 確保 で きる 容量 が 少な い 場 合 、 使用 可能 な 
最大 バイ ト 数 が 返さ れ ま す 。 

失敗 時 に 呼び 出さ れる コー ル バ ッ ク 関 数 に は 、 次 の 表 に 示す エラ ー オ プ ブ ジ ェクト / コ ー ド 
(「code」 プ ロ パ ティ に 格納 ) が 渡さ れ ま す 。 


キー ワーk 仁 


ファ イル か ディ レク トリ が 
NOT_FOUND_ERR 見 つか ら な い 
SECURITY_ERR 
ABORT_ERR 中 断 さ れ た 


| 4 | NOT_HREADABLE_ERR 











| 9 | INVALID MODIFICATION ERR | 不正 な 修正 。 


指定 され た パス に ファ イル 


軸 計 羽生 邊 。 


NO_MODIFICATION_ALLOWED_ERR 修正 で き な い 
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LChrome_ | Android4 」 


Ski ILIN- つ りら 


ディ スク の 使用 状況 を 調べ る 








ここ で は 、File API を 使っ て 保存 で きる ディ スク の 使用 状況 を 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<tttle>SqmplLe</t1t1le> 
<SCr1Dt src="]S/sample.]S"></scrtpt> 
</head> 
<body> 
<h3> デ ィ ス ク の 使用 状況 </h3> 
<div> 圏 TEMPORARY<br><output>9</output> バ イト </dtv> 


<div> 較 PERSISTENT<br><output>9</output> バ イト </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. addEventLtstener( "toad"。 functton(){ 
var ele = document.getEtementsByTagName( "output"): 
checkCapagctty(TEMPORARY,。 の): // テン ボラ リ の 使用 状況 を 調べ る 
checkCapacittyCPERSTSTENT,1): // 永続 的 に 保存 され る 領域 の 使用 状況 を 調べ る 
// 使用 状況 を 調べ る 
functton checkCapactty(dtskType, idx){ 
wtndow.storageInfo.queryUsageAndOuotg( 
dtskType , 
// 成功 時 の 処理 を 行う コー ル バ ッ ク 関 数 
functton(usaqge , quota){ 
ele[idx] .innerHTML = "使用 量 : "+usoge+" バ イト ノ 全 容量 : "+quotqa: 
}, 
// 失敗 時 の 処理 を 行う コー ル バ ッ ク 関 数 
functton(Cerr){ ele[idx] .innerHTML = "エラ ー:"+err.code: } 
う : 
} 
+, fatse): 
// ベン ダー プレ フィ ックス も 考慮 


wtndow. storaggeInfo = wtndow.storageInfo || window.webkttStorageTnfo: 


HINI ] 
Android で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
: ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 
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index.html を Google Chrome で 表示 する と 、 全容 量 と 使用 量 が 表示 され ます 。 


《@) Sample 
ーー 


ディ スク の 使用 状況 


一 TEMPORARY 
使用 量 : 0 パイ トノ 全容 量 . 2708186985 バ イト 
較 PERSISTENT 

使用 量 :. 0 バイ トノ 全容 量 :0 パ イト 





index.html を Chrome for Android で 表示 する と 、 全容 量 と 使用 量 が 表示 され ます 。 


[ _ C 還 還 組 


oy * 


ディ スク の 使用 状況 
較 TEMPORARY 
使用 量 : 524 バ イト ノ 全 容量 : 1322062286 バ イト 


較 PERSISTENT 
使用 量 :-0 バ イト ノ 全 容量 : 0 バイ ト 


フイ スク の 使用 状況 を 調べ る に は 
「window.storagelnfo.queryUsageAndQuota()」 メソッド を 使う 


File API で は 、 使 用 可能 な ディ スク 容量 の 使用 状況 を 調べ る に は 、| window.storage 





Info.queryUsageAndQuota() 」 メ ソ ッ ド を 使い ます 。 最初 の パラ メー タ に は 、 次 の 表 に 
示す 保存 領域 の 種類 を 指定 し ます 。 これ ら は 、 別々 の 領域 に 割り 当て られ て いま す 。 


IlHV 9 還 に に きこ 4 ミト 


プロ パテ ィ (種類 ) 


「queryUsageAndQuota() 」 メ ノッ ド の 2 番目 の パラ メー タ に は 、 成功 時 に 呼び 出さ れ 
る コー ル バ ッ ク 関 数 を 指定 し ます 。 コー ル バ ッ ク 関 数 に は 、 使用 し て いる バイ ト 数 と 全体 の 
バイ ト 数 の 2 つの パラ メー タ が 渡さ れ ま す 。 

「queryUsageAndQuota() 」 メ ノッ ド の 3 番目 の パラ メー タ に は 、 エラ ー 発 生 時 に 呼び 
出さ れる コー ル バ ッ ク 関 数 を 指定 し ます 。 パラ メー タ に は 、 エラ ー コ ー ド が 渡さ れ ま す 。 エ 
ラー コー ド と 内 容 に つい て は 、 693 ペ ー ジ を 参照 し て くだ さい 。 





関連 項目 + ゅ 
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5 ら E に 11 -29 プ 


ファ イル を 作成 する 


ここ で は 、File API を 使っ て 保存 で きる ディ スク 上 に ファ イル を 作成 する 方 法 に つい て 解説 
し まま 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>SamplLe</tttte> 
<ScrtDt src="]S/sgmple.]S "></scrtpt> 
</head> 
<body> 
<h3> フ ァイル を 作成 </h3> 
< く OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventListener("1ogd"。 functton(){ 
var ele = document.getEtementsByTagName( "output")[@] : 
wtndow.requestFiteSystem( 
// ファ イル の 作成 先 を テン ボラ リ 領 域 に する 
TEMPORARY, 
// 確保 する サイ ズ C1924bytes メ 199 = 199KB) 
1924*190, 
// 成功 時 の コー ル バ ッ ク 関 数 
functton(fs)+ 
// sqmplte.txt フ ァイル を 生成 。 す で に ある 場合 は 上 書き 
fs.root.getFtte("sampte.txt"。{ cregte: true。 exclusive: fatse ま : 
functton(fiteEntry){ 
ete.innerHTML = fiteEntry.ngme+" フ ァイル を 作成 し まし た <br>": 
ele.tnnerHTML += "ファ イル パス :"+fiteEntry.futtPath: 
す 。 
// 失敗 時 の コー ル バ ッ ク 関 数 
functtonCerr){ ele.itnnerHTML = "ファ イル 生成 エラ ー:"+err.code: } 
う : 
}, 
// 失敗 時 の コー ル バ ッ ク 関 数 
functtonCerr){ ele.tnnerHTML = "エラ ー:"+err.code: } 
う : 
+, fatse): 
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// ベン ダー プレ フィ ックス も 考慮 | マ | 
wtndow.requestFtleSystem = wtndow.requestFtteSystem || wtndow.webk1ttRequestFtleSystem: 


Ce に EK その 場合 は 、 ネッ トワ ー ク 環境 (Web 
サー バー 上 ) で 確認 し て くだ さ 


回 幅 団 加 - 


Android で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 


index.html を Google Chrome で 表示 する と 、 フ ァイル が 作成 され 、 ファ イル パス が 表示 され 
ます 。 


ファ イル を 作成 
sample bt+ フ ァイル を 作成 し まし た 


ファ イル パス: /sample td 





index.html を Chrome for Android で 表示 する と 、 ファ イル が 作成 され 、 ファ イル パス が 表 
示さ れ ま す 。 





エ の 

選 N 
ーー ニー ニーーー 記 
wwopenspc2o/ < 
旭 
ファ イル を 作成 Il 
Q① 
sample.tt フ ァイル を 作成 し まし た アア 
ファ イル パス : /sample.txt U 
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生 戸 己 ロ 丁 | 口 NN -2 ワ 7 mw ファ イル を 作成 する 


ファ イル を 作成 する に は 「window.requestFileSystem() 」 メ ソ ッ ド と 
「fS.root.getFile()」 メソ ッ ド を 使う 


File API で 使用 可能 な ディ スク 領域 に ファ イル を 作成 する に は 、「windowrequest 
FileSystem)」 メ ノッ ド と | fSrootgetFile () 」 メ ソ ッ ド を 使い ます 。「window.requestFile 
System () 」 メ ソ ッ ド で は 、 作成 する ファ イル の 保存 先 の 種類 や バイ ト 数 を 指定 し ます 。 最 
人 の パラ メー タ に 保存 先 の 種類 (| TEMPORARY」 か 「PERSISTENT | ) 、 2 番目 の パ 
ラメ ー タ に は ファ イル の バ 人 数 を 指定 し ます 。 

3 番目 の パラ メー タ に は 成功 時 の コー ル バ ッ ク 関 数 、 4 番目 の パラ メー タ に は 失敗 時 の 
コー ル バ パッ ク 関 数 を 指定 し ます 。 

実際 に ファ イル を 作成 する に は 、 成功 時 の コー ル バ ッ ク 関 数 内 で [fsrootgetFile()」 メ 
ソ ッ ド を 利用 し て 行い ます 。「 fS.root.getFile() 」 メ ソ ッ ド の 最初 の パラ メー タ に 、 作成 する 
ファ イル 名 を 指定 し ます 。 2 番目 の パラ メー タ に は 、 作成 時 の オプ ショ ン を 指定 し ます 。 ファ 
イル を 作成 する た め に は 、「 | create: true 「」 は 最低 限 必要 で す 。 ま た 、 す で に 同名 の ファ 
イル が ある 場合 に 上 書き し た く な いび 場合 は 、| exclusive : true」 も 同時 に 指定 し ます 。 

| fSroot.getFile () 」 メ ノッ ド の 3 番目 の パラ メー タ に は ファ イル の 作成 が 成功 し た 時 に 
呼び 出す コー ル バ ッ ク 関 数 を 、 4 番目 の パラ メー タ に は 失敗 時 に 呼び 出す コー ル バ ッ ク 関 
数 を 指定 し ます 。 

成功 時 に 呼び 出さ れる コー ル バ ッ ク 関 数 に は 、「FileEntry」 オ ブ プ ジ ェ クト が 渡さ きれ ま 
す 。 この オプ ジェ クト に は 、 次 の 表 に 示す プロ パテ ィ と メソ ッ ド が あり ます 。 


ファ イル か どう か 。 「true」 な ら フ ァイル 

ディ レク トリ か どう か 。 「true」 な ら デ ィ レ クト リ 
| name = = | ファ イル 名 。 | 
| fle | 「FileEntryl オ プ ジ ェ クト 。 | 
| getMetadata() | 








JHNEP ビ PHINT 
















































getMetadata() 
「flesystem:」 形 式 (URL) に 変換 
































関連 項目 ょ ゅ 


@ ファ イル に テキ スト を 書き 込む MI が 23 0 s ゃ ふさ se 24 間際 iA と ss な SC5 な がい な も Ase の tv D.699 
@ 保存 ご れ て いる ファ イル の 内 容 を 読み 出す ey 了 和 ie な D./0g 
@ 保存 され て いる ファ イル を 削除 する の イア て た た ん タル ミイ ツバ タツ イト ペル トド ンド し で で や (の D./05 


Android 4 





=1 ゴ lmlN 革 21== 
ファ イル に テキ スト を 書き 込む 


ここ で は 、 File API を 使っ て 保存 で きる ファ イル に テキ スト を 書き 込む 方 法 に つい て 解説 し 
ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sampte</tttle> 
<SCrtpt src="]S/sample .]S "></SCrtDt> 
</head> 
<body> 
<h3> フ ァイル に テキ スト を 書き 込み </h3> 
<OUtDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.qddEventListener( "Load" 。 functton()# 
var ele = document .getEtementsByTagName( "output")[9] : 
wtndow . requestFtteSystem( 


// ファ イル の 作成 先 を テン ボラ リ 領 域 に する 


TEMPORARY, で 
// 確保 する サイ ズ C(1924bytesX199 = 199KB) に NJ 
1924*100, = 
// 成功 時 の コー ル バ ッ ク 関 数 内 で ファ イル 生成 を 行う に 
functton(fs){ 4 : 





// sqmpte .txt フ ァイル を 生成 。 すでに ある 場合 は 上 書き 
fs .root.getFtte("sqmpte.txt"。{ create: true, exclustve: fatse }, 
functton(fitleEntry)+1 
// ファ イル 書き 込み 
fttleEntry .createWrtter( 
functton(ftteWrtter){ 
// 書き 込み 完了 時 の 処理 
ftleWriter.onwrtte = functton(){ 
ele.innerHTML = "書き 込み 完了 ": 
} 
// 書き 込み で き な か っ た 時 の 処理 
ftteWrtter.onerror = functton(err)+ 
ele.tnnerHTML = "書き 込み エラ ー:"+err.code: 
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// Blob を 作成 し て 書き 込む 1 マ 
var blobData = new BtobBuitder(): 
// 書き 込む 内 容 ( テ キス ト ) 
blobDgta.qppend("File API sqmple"): 
// 標準 テキ スト で 書き 込む 
fiteWriter.wrtte(bltobData.getBlob("text/platn")): 
}, fsErr // 失敗 時 の コー ル バ ッ ク 関 数 
): 
}, fsErr // 失敗 時 の コー ル バ ッ ク 関 数 
う : 
}, fsErr // 失敗 時 の コー ル バ ッ ク 関数 
2: 
// エラ ー を 一 括 し て 処理 
functton fsErr(err){ qtert(" エ ラー:"+err.code): } 
},。 faqtse): 
// ベン ダー プレ フィ ックス も 考慮 
wtndow.requestFtleSystem = wtndow.requestFileSystem || wtndow .webk1ttRequestFileSystem: 
BlobButtder = WebKitBlobBut1tder: 


ブラ ウザ に よっ て は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネッ トワ ー ク 環境 (Web 
サー バー 上 ) で 確認 し て くだ さい 。 


ンマ すぐ の の や る の 全 ず の @⑥ の の の の み の ひら る で みや や ゆ の る る の あの も る で の 上 の の の の ざる ひひ の ゆ の の ら の ゆ ゆ の の の か みあ の の 作 む の る の の の 愉 さ る 品 の ね あ の る 9 も 本 才 の の 9 の Ga する aeeeeBeeeegesegeaasssg<* 


Android で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 


> の や で お か な の の の 放 が の の な の 和 y@ の も や か る 区 の の の の の も の の の の の 全 pe の 9 な の の: 本 ある の の あの すめ の の ゆあ ゆめ か の る ね る 8 の の 全 の 滞 ちあ る 85aesss ae 826 コミ 。 


index.html を Google Chrome で 表示 する と 、 正しく 書き 込ま れ た こと を 示す メッ セー ジ が 表 
示さ れ ま す 。 
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ファ イル に テキ スト を 書き 込み 
書き 込み 完了 





index.html を Chrome for Android で 表示 する と 、 正しく 書き 込ま れ た こと を 示す メッ セー 
ジ が 表示 され ます 。 
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ファ イル に テキ スト を 書き 込み 
書き 込み 完了 


ファ イル に テキ スト を 書き 込む に は 
「createWriter()」 メソッド と 「BlobBuilder」 オ ブ ジ ェクト を 使う 


ファ イル に テキ スト を 書き 込む に は 、| fileEntry」 オ ブ ジ ェクト の | createWriter() 」 メ ソ ッ 
ド と | BlobBuilder」 オプ ジェ クト を 使い ます 。| createWriter()) 」 メ ソ ッ ド の 最初 の パラ 
メー タ に は 成功 時 の コー ル バ ッ ク 関 数 を 、 2 番目 の パラ メー タ に は 失敗 時 の コー ル バ ッ ク 
関数 を 指定 し ます 。 

ファ イル に テキ スト を 書き 込む に は 、 成功 時 の コー ル バ ッ ク 関 数 内 で 行い ます 。 コー 
ル バ ッ ク 関 数 に は 、| fleWriter]」 オ プ ジ ェ クト が 渡さ れ ま す 。 テキ スト を 書き 込む に は 、 
| Blob」 (Binary Large OBject) を 使い ます 。 書き 込む テキ スト は 、| Blob」 オ プ ブ ジ ェクト 
の |「append() 」 メ ソ ッ ド を 利用 し ます 。 | append() 」 メ ソノ ッ ド の パラ メー タ に は 、 書き 込む 
テキ スト を 指定 し ます 。 

用 意 さ れ た | Blob] デー タ を 、| leWriter] オ プ ジ ェ クト の | write() 」 メ ノッ ド を 使っ て 
書き 込み ます 。 この と き 、「 Blob」 オブ ジェ クト の デー タ は | getBlob() 」 メ ソ ッ ド を 使っ て 読 
み 出 し 、| write () 」 メ ノ ッ ド の パラ メー タ と し て 指定 し ます 。 | getBlob() 」 メ ノッ ド の パラ 
メー タ に は 、 標準 テキ スト デー タ で ある 「text/plain」 の 文字 列 を 指定 し ます 。 

テキ スト の 書き 込み に 成功 する と 、| fileWriter」 オ プ ジ ェ クト の | write」 イ ベン ト が 発生 
し ます 。「 ileWriter」 オ ブ ジ ェクト の | onwrite」 プ ロ パ ティ に 、 書き 込み 成功 時 に 呼び 出 
す イ ベン ト ハ ンド ラ を 設定 する こと が で きま す 。 また 、 書き 込め な か っ た 場合 に は 、| error」 
イベ ント が 発生 し ます 。「 操 eWriter」 オ ブ ジ ェクト の 「 onerror」 プロパ ティ に 、 書き 込み エ 
ラー 発生 時 に 呼び 出す イベ ント ハン ドラ を 設定 する こと が で きま す 。 


mml 四半 識 |BGtBIOD() 」 メソ ッ ド の 動作 の 違い 


[getBlob() 」 メソ ッッ ド は 、 プラ ウザ に よっ て 動作 が 異な り ま す 。 Google Chrome 
(WebKit) で は 、| getBlob() 」 メ ノッ ド を 実行 し た 際 に 、| append 0) 」 メ ソ ッ ド で 追加 し た 
デー タ が 削除 され ませ ん 。 IE10 や Firefox で は 追加 し た デー タ は 、| getBlob (0 」 メ ノッ ド 
に よっ て 削除 され ます 。 

な お 、 次 の ブロ グ 記 事 を 参考 に し て くだ さい 。 

http://blogs.msdn.com/D/ie _ja/archive/2012/02/01/blobbuilder.aspx 
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LChrome LAndroid4 


2E511N- つ ラウ 


償 仔 され て いる ファ イル の 内 容 を 読み 出す 





ここ で は 、 File API を 使っ て 保存 8 きれ た テキ スト ファ イル の 内 容 を 読み 出す 方 法 に つい て 解 
説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttte>Sqmpte</ttt1le> 
<SCrtpt src="]S/sqmple .]S "></SCr1pt> 
</head> 
<body> 
<h3> テ キス ト フ ァイル を 読み 出し </h3> 
<OUtDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . addEventLtstener( "togd" 。 functton(){ 
var ele = document .getElLementsByTagName( "output")[9] : 
wtndow.requestFtleSystem( 


// ファ イル の 作成 先 を テン ポラ リ 領 域 に する 





TEMPORARY, 

エ // 確保 する サイ ズ 〈 読 み 出 し の 場合 は 意味 が な い の で の @) 
て @ 
者 // 成功 時 の コー ル バ ッ ク 関 数 内 で ファ イル 生成 を 行う 
functtonCfs){ 

5 // saqmpte .txt プ ァイル を 読み 出し て 表示 

ー fs.root.getFtle("saqmple.txt"。 人 人, 


functton(fitleEntry){ 
ftleEntry.ftle(functton(fitte){ 
// FtleReaqder で ファ イル 読み 出し 
var reader = new FtleReader( ): 
// 読み 込み 完了 時 の 処理 (文字 を テキ スト エリ ア に 出力 ) 
reader.onload = functton()+ 
ele.tnnerText = thts.result: 
} 
// テキ スト ファ イル と し て 読み 出し 
reader .readAsText(ftle): 
}): 
すき 放 PT 
2: 
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+, fsErr 4 
): 
// エラ ー を 一 括 し て 処理 
function fsErrCerr){ alert(" エ ラー:"+err.code): } 
+。 false): 
// ベン ダー プレ フィ ックス も 考慮 


wtndow.requestFtteSystem = wtndow.requestFileSystem || wtndow.webkttRequestFtleSystem: 


回国 


ブラ ウザ に よっ て は 、 ロー Eee その 場合 は 、 ネッ トワ ー ク 環境 (Web 
サー バー 上 ) で 確認 し て くだ さ 


回 軸 四 - 


Android で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 


mdex.html を Google Chrome で 表示 する と 、 sample.txt フ ァイル (内 容 は | File API sample」 
の 文字 ) を 読み 出し た 結果 が 表示 され ます 。 


テキ スト ファ イル を 読み 出し 


File API sample 





index.html を Chrome for Android で 表示 する と 、sample.txt フ ァイル (内 容 は | File API 
sample」 の 文字 ) を 読み 出し た 結果 が 表示 され ます 。 


IV 9|!] 人 だ に ま 貞 4 


| wwW.ODenSDC2.org/ CI 向 


テキ スト ファ イル を 読み 出し 


File APl sample 
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還 王 ビ ビビ TI ロ NI-299 m 保存 され て いる ファ イル の 内 容 を 読み 出す 







保存 され て いる ファ イル の 内 容 を 読み 出す に は 
「fS.root.getFile()」 メソッド と 「FileRHeader」 オブ ジェ クト を 使う 


保存 さ れ て いる ファ イル の 内 容 を 読み 出す に は 、「fsroot.getFile() 」 メ ノッ ド と 「File 
Reader」 オ ブ ジ ェクト を 利用 し ます 。|「fsroot.getFile() 」 メ ソ ッ ド の 最初 の パラ メー タ に 
読み 出し た い フ ァイル パス (ファ イル 名 ) を 指定 し ます 。 ファ イル パス は 、 UNIX の ファ イル シ 
ステ ム や URL と 同様 に 、| /」 (半角 スラ ッシュ ) で 区 切っ て 指定 し ます 。 2 番目 の パラ メー タ 
は オプ ショ ン で す が 、 不要 な の で 、|「 上 『 」 と し て 何 も オ プシ ョ ン を 指定 し な いよ うに し ます 。 

3 番目 の パラ メー タ は 、 読み 出す ファ イル が 存在 し た 場合 に 呼び 出す コー ル バ ッ ク 関 数 
に な り ま す 。 4 番目 の パラ メー タ は 、 エ ラー 発生 時 に 呼び 出す コー ル バ ッ ク 関 数 に な り ま す 。 

ファ イル の 読み 出し は 、 成功 時 に 呼び 出す コー ル バ ッ ク 関 数 内 で 行い ます 。 コー ル 
パッ ク 関 数 に は 、| fleEntry」 オ プ ジ ェ クト が 渡さ れ ま す 。 ファ イル を 読み 出す に は 、 この 
| ileEntry]」 オ ブ プ ジ ェ クト の 「 介 e() 」 メ ノッ ド を 使い ます 。「file() 」 メ ツ ッ ド の パラ メー タ に 、 
ファ イル 内 容 を 読み 出す 関数 を 指定 し ます 。 関数 に は ファ イル オブ ジェ クト が 渡さ れ ま す 。 
ファ イル オプ ジェ クト が 渡さ れれ ば 、| FileReader」 オ ブ ジ ェクト の [readAsText() 」 メ ノッ 
ド を 使っ て 、 テキ スト ファ イル を 読み 出す こと が で きま す (683 ペ ー ジ 参照 )。 

テキ スト ファ イル が すべ て 読み 出さ れ た 場合 に は 、 ファ イル オブ ジェ クト の 「load 」 イ ベン 
ト が 発生 し ます 。 これ は 、 ファ イル オプ ジェ クト の 「onload 」 プロ パテ ィ に イベ ント ハン ドラ を 
設定 すれ ば 、 読み 出し 完了 時 に 処理 を 行う こと が で きま す 。 この イベ ント ハン ドラ 内 で 読 
み 出 され た テキ スト に アク セス する に は 、「this.result」 プロ パテ ィ を 参照 し ます 。 
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関連 項目 ! 


久 ファ イル を 作成 する 和義 せき 人 1 な 向き 2 な か な 4 D.696 
@ ファ イル に テキ スト を 書き 込む 利和 の を ss すめ な が: ゃ な 才 も et まとも さじ D.699 


Android 4 





だ も すす すこ に すま に 


保存 され て いる ファ イル を 削除 する 


ここ で は 、 File API を 使っ て 保存 され た ファ イル を 削除 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<ttt1le>SqmpLe</t1tle> 
<SCrtpt src="]s/sampLe .]S "></ScrtDt> 
</heqd> 
<body> 
<h3> フ ァイル を 削除 </h3> 
<OUtDut></OUt て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window.addEventLtstener("1oad"。 functton(){ 
var ele = document.getEtementsByTggName( "output")[9] : 
wtndow.requestFtleSystem( 
// 処理 対象 は テン ボラ リ 領 域 
TEMPORARY, 
// 確保 する サイ ズ C 削 除 の 場合 は 意味 が な い の で 9@) 
9, 
// 成功 時 の コー ル バ ッ ク 関 数 内 で ファ イル 生成 を 行う 
functton(fs){ 
// sqmpte.txt ブ ァイル を 削除 
fs.root.getFile("sample.txt"。 人, 
functton(ftlLeEntry)+ 





IdV 9 EETE に 4 Sm 


ftteEntry.remove(functton()t 
ele.innerHTML = fiteEntry.fultPath+" を 削除 し まし た ": 
す 。 する SEPP) ? 
}, fsErr 
): 
+, fsErr 
): 
// エラ ー を 一 括 し て 処理 
functton fsErrCerr){ qtlert(" エ ラー:"+err.code): } 
+。 faqlse): 
// ベン ダー プレ フィ ックス も 考慮 


wtndow.requestFtteSystem = wtndow.requestFtteSystem || wtndow.webk1ttRequestFtleSystem: 
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W 戸 選 ビ TI ロト NN - ヨ ロロ WW 保存 され て いる ファ イル を 削除 する 


四国 全 - 
ブラ ウザ に よっ て は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネッ トワ ー ク 環境 (Web 
サー バー 上 ) で 確認 し て くだ さい 。 また 、 ルー トディ レク トリ に sample.txt が ある こと と し ます 。 


回 較 ! 胃 回 エト … 、 
Android で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 


index.html を Google Chrome で 表示 する と 、 sample.txt フ ァイル を 削除 し た 結果 が 表示 さ 
れ ま す 。 





index.html を Chrome for Android で 表示 する と 、 sample.txt フ ァイル を 削除 し た 結果 が 
表示 され ます 。 


/sample.txt を 削除 し まし た 


ファ イル を 削除 する に は 
語 細 彰 国 引 議 「fs.rootigetFile()」 メ ソ ッ ド と 「remove()」 メ ソ ッ ド を 使う 


ファ イル を 削除 する に は 、| fS.root.getFile() 」 メソ ッ ド と [ fileEntry」 オブ ジェ クト の 
| remove() 」 メ ソ ッ ド を 利用 し ます 。| fsroot.getFile () 」 メ ソ ッ ド の 最初 の パラ メー タ に 、 
削除 し た い フ ァイル パス (ファ イル 名 ) を 指定 し ます 。 ファ イル パス は 、 UNIX の ファ イル シス 
テム や URL と 同様 に 、| /] (半角 スラ ッシュ ) で 区 切っ て 指定 し ます 。 2 番目 の パラ メー タ は 
オプ ショ ン で す が 、 不要 な の で 、| 1 ] と し て 何 も る オプ ショ ン を 指定 し な いよ うに し ます 。 

3 番目 の パラ メー タ は 、 削除 する ファ イル が 存在 し た 場合 に 呼び 出す コー ル バ ッ ク 関 数 
こ な り ます 。 4 番目 の パラ メー タ は 、 エ ラー 発生 時 に 呼び 出す コー ル バ ッ ク 関 数 に な り ま す 。 

ファ イル の 削除 は 、 成功 時 に 呼び 出す コー ル バ ッ ク 関 数 内 で 行い ます 。 コー ル バ ッ ク 関 
婦 に は | fileEntry」 オ プ ジ ェ クト が 渡さ れ ま す 。 ファ イル を 削除 する に は 、 この 「 操 eEntry」 
オプ ジェ クト の | remove() 」 メ ノッ ド を 使い ます 。「remove() 」 メ ノッ ド の パラ メー タ に ファ イ 
ル 削 除 後 に 実行 する 関数 を 指定 し ます 。 な お 、 削除 する ファ イル が な い 場 合 は 、 エラ ー 
に な り ま す 。 


関連 項目 


主 ファ イル を 作成 する 要衝 和光 本 泊 洒 凡 本 も も も を ま る g 和 な 法人 の Rn D.696 


呈 己 ビビ T11 品 HHN- コ ロロ 1 
ディ レク トリ を 作成 する 


ここ で は 、 File API で ディ レク トリ を 作成 する 方 法 に つい て 解説 し ます 。 








= まや 中 可 =m 要 衛 HTML の コー ド (index.htm|) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<ttttle>Sqmple</tttle> 
<scrtpt src="]s/sample .]S"></SCrtDt> 
</hegd> 
<body> 
<h3> デ ィ レ クト リ を 作成 </h3> 
<OUtDut></OUtDUt> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.aqddEventListener("1oagd" 。 functton(){ 
var ele = document .getELementsByTagName( "output")[9] : 
wtndow.requestFileSystem( 


// ディ レク トリ の 作成 先 を テン ボラ リ 領 域 に する 


TEMPORARY, 
// 確保 する サイ ズ C1924bytesX 199 = 199KB) 
1924*109, ャ ーー 
// 成功 時 の コー ル バ ッ ク 関 数 > 
function(fs){ = 

// Document デ ィ レ クト リ を 生成 。 すでに ある 場合 は 上 書き 4 





fs .root.getDtrectory("Document"。{ create: true }, 
functton(CdtrEntry){ 
ele.tnnerHTML = dirEntry .nome+" デ ィ レ クト リ を 作成 し まし た <br>": 
ele.innerHTML += "ディ レク トリ パス :"+dirEntry.futtPath: 
}, 
// 失敗 時 の コー ル バ ッ ク 関 数 
functionCerr){ ele.1tnnerHTML = "ファ イル 生成 エラ ー: "+err.code: } 
): 
}, 
// 失敗 時 の コー ル バ ッ ク 関 数 
functionCerr){ ele.innerHTML = "エラ ー:"+err.code: } 
う : 
}。 faqlse): 
// ベン ダー プレ フィ ックス も 考慮 


window.requestFtteSystem = wtndow.requestFtleSystem || wtndow.webkitRequestFiteSystem: 


ゴ ! 
で 
と 
り 
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ブラ ウザ に よっ て は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネッ トワ ー ク 環境 (Web 
サー バー 上 ) で 確認 し て くだ さい 。 


回 


Androld で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 


index.html を Google Chrome で 表示 する と 、 ディ イレ クト リ が 作成 され た 場合 、 メッ セー ジ が 
表示 され ます 。 


ティ レク トリ を 作成 
Document デ ィ レ クト リ を 作成 し まし た 


ティ レク トリ バ パス: /Document 





index.html を Chrome for Android で 表示 する と 、 ディ イレ クト リ が 作成 され た 場合 、 メッ セー 
ジ が 表示 され ます 。 


| WWW_.OPenSDC2.orq/ 


ディ レク トリ を 作成 


Document デ ィ レ クト リ を 作成 し まし た 
ディ レク トリ パス : /Document 





加 司 己 ピ 丁 | 口 N - コ ロ ] mW ディ レク トリ を 作成 する 





























ディ レク トリ を 作成 する に は 「window.requestFileSystem()」 メ ソ ッ ド と 
[fs.root.getDirectory()」 メ ソ ッ ド を 使う 


File API で 使用 可能 な ディ スク 領域 に ディ レク トリ を 作成 する に は 、| window.request 
FileSystem() 」 メ ノッ ド と 「fsroot.getDirectory () 」 メ ノッ ド を 使い ます 。 | window.request 
FileSystem () 」 メ ノッ ド で は 、 作成 する ディ レク トリ の 保存 領域 の 種類 や バイ ト 数 を 指定 し ま 
す 。 最初 の パラ メー タ に 保存 先 の 種類 (| TEMPORARY」 か 「PERSISTENT」) 、2 番 目 
の パラ メー タ に は ディ レク トリ の バイ ト 数 を 指定 し ます 。 

3 番目 の パラ メー タ に は 成功 時 の コー ル バ ッ ク 関 数 、 4 番目 の パラ メー タ に は 失敗 時 の 
コー ル バ ッ ク 関 数 を 指定 し ます 。 

実際 の ディ レク トリ の 作成 は 、 成功 時 の コー ル バ ッ ク 関 数 内 で | fS.root.getDirectory 
() | メソ ノッ ド を 利用 し て 行い ます 。「fSroot.getDirectory() 」 メ ソ ッ ド の 最初 の パラ メー タ 
に 、 作成 する ディ レク トリ 名 を 指定 し ます 。 2 番目 の パラ メー タ に は 、 作成 時 の オプ ショ ン で 
ある [|create: true」 を 指定 し ます 。 

「fsroot.getDirectory () 」 メ ノッ ド の 3 番目 の パラ メー タ に は ディ レク トリ の 作成 が 成功 
し た と き に 呼び 出す コー ル バ ッ ク 関 数 を 、 4 番目 の パラ メー タ に は 失敗 し た と き に 呼び 出す 
コー ル バ ッ ク 関 数 を 指定 し ます 。 

成功 時 に 呼び 出さ れる コー ル バ ッ ク 関 数 に は 、「dirEntry」 オ ブ ジ ェクト が 渡さ れ ま す 。 
この オブ ジェ クト に は 、 次 の 表 に 示す プロ パテ ィ と メソ ッ ド が あり ます 。 


ファ イル か どう か 。 「true」 な ら フ ァイル 
ディ レク トリ か どう か 。 「true」 な ら デ ィ レ クト リ 
凍 凍 本 | 、 も 06200 本 oo 


メタ デー タ を 取得 
ディ レク トリ を 移動 
ディ レク トリ を コピ ー 

) 

0 

) 


IImII に II 





















の [ 






















IdV 9 EE に EEK4se 


り 
「flesystem:」 形 式 (URL) に 変換 
ディ レク トリ を 削除 

サブ ディ レク トリ も 含め て まる ご と 削除 
ディ レク トリ 一 覧 を 取得 


内 放 天 良 三 上 用 , 
き 層 デイ レク トリ を 作成 する で が AM が か YE D./ ] () 
e ディ レク トリ を 削除 する ire p.713 
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Android 4 


es 1HN- コ ロジ 


サブ ディ レク トリ を 作成 する 


ここ で は 、 File API で サ プ デ ィ レ クト リ を 作成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttle>Sample</title> 
<SCrtDt src="]S/sample.]S"></sCrtpt> 
</head> 
<body> 
<h3> サ プ デ ィ レ クト リ を 作成 </h3> 
<OU て DUut></OUtDUt> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


window.qddEventListener("1ogd" 。 function(){ 
var ele = document .getELementsByTagName( "output")[9] : 
wtndow.requestFileSystem( 
// ディ レク トリ の 作成 先 を テン ボラ リ 領 域 に する 
TEMPORARY, 
// 確保 する サイ ズ C1924bytesX199 = 199KB) 
1924*1009 , 
// 成功 時 の コー ル バ ッ ク 関 数 
functton(fs){ 
// 各種 ディ レク トリ を 生成 
makeSubDtrectory(fs.root, "temp"): 





makeSubDtrectory(fs.root,。 "temp/photo"): 


IdV 9 EEEK2 Sm 


makeSubDtrectory(fs .root。 "temp/music"): 
makeSubDtrectory(fs .root,。 "temp/photo/2912"): 
+, fsErr 
う : 
// サ プ デ ィ レ クト リ を 作成 。 常に 上 書き で 作成 
functton makeSubDtrectoryCbaseDtr, dtrName){ 
baseDtr.getDtrectory(dtrName , { create: true }, 
functton(dtrEntry){ 
ele.itnnerHTML += dirEntry .name+" デ ィ レ クト リ を 作成 し まし た <br>": 
ele.innerHTML += "ディ レク トリ パス :"+dirEntry.fuLLPath+"<br>": 
},。 fsErr 
う : 
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和 m 王 ビ ロイ T| 口 NN - ヨ ロ 2 mw サブ ディ レク トリ を 作成 する 


// エラ ー を 一 括 し て 処理 私 作 
function fsErrCerr){ qtert(" エ ラー:"+err.code): } 

+, false): 

// ベン ダー プレ フィ ックス も 考慮 


witndow.requestFtteSystem = wtndow.requestFtleSystem || wtndow.webkttRequestFttleSystem: 


ブラ ウザ に よっ て は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネ ットワーク 環境 (WVeb 
サー バー 上 ) で 確認 し て くだ さい 。 


ooOooooogop ge の ちる ひひ る の ④ の 669 ず の ず の ② の あの の の の の かむ ゅ ざさ の の ④⑥ ゆ の の や の ④ の ひひ の も の ね ちの や ひ ゆ ひふみ の の ひひ りや か る の ちの ひ の ひ も の や る の ら な の みのる ら の の ひら ひる の ひひ ひので ひので や さ の の ひび や の の ゐ ゐ の の の や の の の の の ひらの の の の の の の ちの の る @ の お る る の の の の の 


Android で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
ザ が Ohrome に な っ て いる の で 、 その まま 動作 し ます 。 


index.html を Google Chrome で 表示 する と 、 サブ ディ レク トリ が 作成 され た 場合 、 メッ セー 
ジ が 表示 され ます 。 


サブ ディ レク トリ を 作成 
temp テ イレ クト リ を 作成 し まし た 


ティ レク トリ バス :/temp 

photo テ ディ レ クト リ を 作成 し まし た 

ティ レ クト リ を 9mB/photo 
music デ イレ クト リ を 作成 し まし た 
ディ レク トリ バス :/temp/music 
2012 テ ディ レク トリ を 作成 し まし た 
ディ レク トリ バス :/temp/photo/2012 





index.html を Chrome for Android で 表示 する と 、 サ ブ デ ィ レ クト リ が 作成 され た 場合 
セー ジ が 表示 され ます 。 


サブ ディ レク トリ を 作成 


temDp デ ィ レ クト リ を 作成 し まし た 
ディ レク トリ バス : /temp 
photo デ ィ レ クト リ を 作成 し まし た 
ディ レク トリ バス : /temp/photo 
music デ ィ レ クト リ を 作成 し まし た 
ディ レク トリ パス : /temp/music 
2012 デ ィ レ クト リ を 作成 し まし た 


ディ レク トリ パ バス : /temp/photo/2012 
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生 王 ピロ 丁 | 口 N| - ヨ ロ 2 m サブ ディ レク トリ を 作成 する 


miis=I 下 サブ ディ レク トリ を 作成 する に は 「getDirectory() 」 メ ソ ッ ド を 使う 


File APT で 使用 可能 な ディ スク 領域 に サブ ディ レク トリ を 作成 する に は 、「getDirectory 
() 」 メ ソノ ッ ド を 使い ます 。 サブ ディ レク トリ を 作成 する に は 、[「getDirectory () 」 メ ノッ ド の 最初 


の パラ メー タ に 、| /] (スラ ッシュ ) で 区 切っ て 作成 し た い デ ィ レ クト リ 名 を 記述 し ます 。 た だ し 、 
親 デ イレ クト リ が 存在 し て いな い 場 合 は 作成 され ず 、 エラ ー に な り ま す 。 この 点 以外 は 、 通常 





関連 項目 ょ ゅ 


も だ 2 りり 沈 邊 且 生 る 信人 ea の か tettawt tedeyY く take 760044 500hevd40 っ 0 D.707 
全学 も が パプ 8E 全 間 放 補い 3 近 な oNteEevctrt2E32YuRPvt2P BFK の 243Sr0GSete8ZKXs 和 DES ASTUVKO p.713 
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ご = 症 純 便 間 回 IN EE 回 
ディ レク トリ を 削除 する 


ここ で は 、 File API を 使っ て 作成 され た ディ レク トリ を 削除 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 欄 


<!DOCTYPE html> に 
<html> 過 
<hegd> | 
<metg charset="utf-8"> | ロ 
<tttle>Sqmplte</t1t1e> 
<SCr1Dt src="js/sample.)5"></scrtpt> | 
</heod> 「 | 
<body> I ロ 
<h3> デ ィ レ クト リ を 削除 </h3> | 
<output></output> に 
</body> 
</html> ーーー 


JavaScript の コー ド (sample.jS) 


wtndow.aqddEventLtstener("1oad" 。 functton(){ 
var ele = document.getEtementsByTagName( "output")[ の ] : 一 
witndow.requestFtleSystem( ロ 
// 処理 対象 は テン ボ ポラ リ 領 域 
TEMPORARY, ' 「 か | - 
// 確保 する サイ ズ ( 削 除 の 場合 は 意味 が な い の で の @) Lo 
9, 
// 成功 時 の コー ル バ ッ ク 関 数 内 で 削除 処理 を 行う 
functton(fs){ 
// temp デ ィ レ クト リ を 削除 
fs.root.getDtrectory("temp",。 人 人, 
functtonCdtrEntry){ 








ldV 9 EFZFE 


dirEntry.removeRecurstvely(functton(){ | 一 「 
ele.innerHTML = dirEntry.fultPath+" を 削除 し まし た ": 
+, fsErr): 
}, fsErr 
う : 
+, fsErr 
う : 
// エラ ー を 一 括 し て 処理 
functton fsErrCerr){ alert て "エラ ー:"+err.code): } 
}, fqlse): 6 
// ベン ダー プレ フィ ックス も 考 庫 
wtndow.requestFtleSystem = wtndow.requestFtleSystem || wtndow.webkttRequestFtleSystem: 
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司 ヒロ T| 口 N| - コ ロコ m ディ レク トリ を 削除 する 


同上 円 団 革 - 
ブラ ウザ に よっ て は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネ ットワーク 環境 (Web 
サー バー 上 ) で 確認 し て くだ さい 。 また 、「temp」 デ ィ レ クト リ は 作成 済み の こと と し ます 。 


回 回 回 回 - 


Android で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 から は デフ ォ ル ト の ブラ ウ 
ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 


index.html を Google Chrome で 表示 する と 、| temp」 デ ィ レ クト リ が 削除 され 、 メッ セー ジ が 
表示 され ます 。 


ディ レク トリ を 削除 
/temp を 削除 し まし た 





index.html を Chrome for Android で 表示 する と 、「temp」 デ ィ レ クト リ が 削除 され 、 メ ッ セ ー 
ジ が 表示 され ます 。 
ディ レク トリ を 削除 
/temp を 削除 し まし た 





生 司 ビ DTI 口 N!- コ ロコ mw ディ レク トリ を 削除 する 


ディ レク トリ が すでに 削除 きれ て いる 場合 に 、 再度 、 削除 し よう と する と 、 エラ ー に な り ま す 。 




















語 旨 記 較 電電 時 ディ レク トリ を 削除 する に は 「fS.root.getDirectory()」 メ ソ ッ ド と 
「remove()」 メ ソ ッ ド や 「removeFHecursively()」 メ ソ ッ ド を 使う 


ディ レク トリ を 削除 する に は 、| fsroot.getDirectory ()) 」 メ ソ ッ ド と | dirEntry」 オ ブ ジ ェクト 
の 「remove() 」 メ ノッ ド 、 ま た は 、「removeRecursively ()) 」 メ ソ ッ ド を 利用 し ます 。| fSroot 
getDirectory() 」 メ ソ ッ ド の 最初 の パラ メー タ に 、 削除 し た い デ イレ クト リ 名 を 指定 し ます 。 

3 番目 の パラ メー タ は 、 削除 する ディ レク トリ が 存在 し た 場合 に 呼び 出す コー ル バ ッ ク 関 
数 に な り ま す 。4 番 目 の パ ラメ ー タ は 、 エ ラー 発生 時 に 呼び 出す コー ル バ ッ ク 関 数 に な り ま す 。 

ディ レク トリ を 削除 する に は 、 成功 時 に 呼び 出す コー ル バ ッ ク 関 数 内 で 行い ます 。 コー 
ル バ ッ ク 関 数 に は 、「dirEntry」 オ ブ ジ ェクト が 渡さ れ ま す 。 ディ レク トリ を 削除 する に は 、 
この [dirEntry」 オ ブ ジ ェクト の 「 remove() 」 メ ノッ ド 、 ま た は 、「removeRecursivelyUJ 
メソ ッ ド を 使い ます 。「remove() 」 メ ノッ ド 、 また は 、「removeRecursively () 」 メ ソ ッ ド の 
パラ メー タ に 、 デイ レク トリ 削除 後に 実行 する 関数 を 指定 し ます 。 

「remove() 」 メ ソ ッ ド は 、 該当 する ディ レク トリ だ け を 削除 し ます 。 その 際 、 ディ レク トリ 
内 が 空 で ある 必要 が あり ます 。「removeRecursively () 」 メ ソ ッ ド の 場合 は 、 デイ レク トリ 
内 に ある ファ イル や サブ ディ レク トリ な ども 含め て まる ご と 削除 し ます 。 な お 、 削除 する ディ 
レク トリ が な い 場 合 は 、 エラ ー に な り ま す 。 





IdHV 9 EE に EE に 4Se 


関連 項目 ょ ! 
e ディ レク トリ を 作成 する oo D.707 
e サブ ディ レク トリ を 作成 する ……… ド ドド ドド Tr p.710 
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1 = 洋 時 個 義 | 団 8 に に 1 困 どっ 
ディ レク トリ 一 覧 を 取得 する 


ここ で は 、 File API を 使っ て 作成 され た ディ レク トリ 内 に ある ファ イル な どの 一 覧 を 取得 する 
ロ 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 








と 。 も 





= <html> 
ト | <head> 
ーー <metq charset="utf-8"> 
1 <tttte>Sqmpte</title> 
ed <SCrtpt src="]s/sample .]S"></scrtpt> 
* </head> 
昌 < も body 
ロ <h3> デ ィ レ クト リー 覧 を 表示 </h3> 
<output></output> 
</html> 
王 
E JavaScript の コー ド (sample.js) 
3 wtndow.addEventListener("toad" functton(){ 
var ele = document.getEtementsByTagName( "output")[9]: 
ME window.requestFttleSystem( 
_ // 処理 対象 は テン ボラ リ 領 域 
本 5T= TEMPORARY, 
N ェ // 確保 する サイ ズ ( 一 覧 取得 の 場合 は 意味 が な い の で の @) 
= 1 9, 
 n // 成功 時 の コー ル バ ッ ク 関 数 内 で 処理 を 行う 
ーー mn functton(fs){ 
前 半 】 // ルー トディ レク トリ 一覧 を 取得 
ps に fs.root.getDirectory("/"。 革 ,。 


| function(dirEntry){ 
// ディ レク トリ 内 を 読み 出す オプ ジェ クト を 生成 
var dtrReader = dirEntry.cregteReqder(): 
// 一 覧 を 取得 
dtrReader.readEntrtes( 
functton(1tst){ 
// ファ イル ディレク トリ の 数 だ け 繰 り 返 し 
for(var 1= の : 1<ltst.1ength: 1++){ 
ele.tnnerHTML += tist[1] .name: 
tf (ltst[i] .1tsFtte){ 
// ファ イル の 場合 
ele.innerHTML += "ファ イル <br>": 
+etse{ 
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還 ビビ ピロ T| 口 NN - ヨ ロイ mw ディ レク トリ 一 覧 を 取得 する 


// ディ レク トリ の 場合 イズ 
ele.tnnerHTML += "ディ レク トリ <br>": 
} 
} 
ト 、 f あ EC や 
う : 
}, fsErr 
う : 
}, fsErr 
う : 
// エラ ー を 一 括 し て 処理 
function fsErrCerr){ qtert(" エ ラー:"+err.code): } 
+, false): 
// ベン ダー プレ フィ ックス も 考慮 


wtndow.requestFitteSystem = wtndow.requestFtteSystem || wtndow.webk1ttRequestFt leSystem: 


HINF| ee ec oc 
フラ ウザ に よっ て は 、 ロー TRSRWR RE その 場合 は 、 ネッ トワ ー ク 環境 (We 
サー バー 上 ) で 確認 し て くだ さ 


Android で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 


index.html を Google Chrome で 表示 する と 、 ルー トディ レ クト リ 内 に ある ファ イル ・ フ ォ ル ダ 
の 一 覧 が 表示 され ます 。 








ディ レク トリ 一覧 を 表示 


Document デ ィ レ クト リ 
sample.txt フ ァイル 


IHV 9 に きこ に 4 5 





index.html を Chrome for Android で 表示 する と 、 ルー トディ レク トリ 内 に ある ファ イル ・ フ ォ 
ル ダ の 一 覧 が 表示 され ます 。 


www.openSspc2.org/test1/sam | 向 


ディ レク トリ 一 覧 を 表示 


Document デ ィ レ クト リ 
abc.tt フ ァイル 


memo.ttt フ ァイル 
test .ttt フ ァイル 
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還 ビ ビ ロ イ | 口 N- ヨ ロス mw ディ レク トリ 一 覧 を 取得 する 


mm が 下 ディ レク トリ 一 覧 を 取得 する に は 「createReader()」 メソ ッ ド を 使う 


ディ レク トリ 一 覧 を 取得 する に は 、|「 dirEntry」 オ プ ジ ェ クト の 「createReader() 」 メ ソ ッ 
ド を 呼び 出し ます 。 返さ れ た オプ ジェ クト の 「readEntries() 」 メ ノッ ド を 使う こと で 、 ディ レ 
クト リ 内 に ある ファ イル ・ フ ォ ル ダ の 一 覧 が 取得 で きま す 。「readEntries() 」 メ ノッ ド の パ 
ラメ ー タ に は 、 取得 に 成功 し た と き に 呼び 出す コー ル バ ッ ク 関 数 を 指定 し ます 。 この コー 
ル バ ッ ク 関 数 の パラ メー タ に 、 ファ イル ・ デ ィ レ クト リ の 一 覧 が 配列 と し て 渡さ れ ま す 。 配列 
に は 、| File] オブ ジェ クト や | Direcotry」 オ ブ ジ ェクト が 入っ て いる の で 、 必要 な プロ パ 
ティ を 読み 出し ます 。 
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避 E ビ ロロ 11 品 N- ヨ ロロ 5 
ファ イル を コビー する 


ここ で は 、 File API を 使っ て 作成 され ん た ファ イル を コピ ー す る 方 法 に つい て 解説 し ます 。 


= まや 中 = 赴 可 mm HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>SampLe</t1tLe> 
<SCrtDpt src="]S/sample .]S "></SCrtDt> 
</head> 
<body> 
<h3> フ ァイル を コピ ー す る </h3> 
<OuUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("1Load" 。 functton()+ 
var ele = document.getElLementsByTagName( "output")[9]: 
wtndow .requestFtleSystem( 


// 処理 対象 は テン ボラ リ 領 域 


TEMPORARY, 

// 確保 する サイ ズ C て ここ で は 意味 が な い の で の @) 「 

9 りー 
ま T N] 

// 成功 時 の コー ル バ ッ ク 関 数 内 で 処理 を 行う き 

function(fs){ 還 ミ 
// test.txt を コピ ー す る 旭 





fs.root.getFite("/test.txt"。 全 , 
functton(fileEntry){ 


TI 
①D 
ア 
U 
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fiteEntry .getParent(functton(targetDtr){ 
// testCopy 時 間 と いう 新た な 名 前 で コピ ー を 作成 
var ttme = Date .now( ): 
var newFtleName = "testCopy"+t1me+" .txt"・ 
ftteEntry.copyTo(targetDtr, newFtLeName, functton(Ccopyfttle)+ 
ele.innerHTML = copyfile.name+" と し て コピ ー し まし た 。 ": 
}, fsErr): 
} 
すき PP)5 
}, fsErr 
): 
オッ か が 
): 


mg 避 E ビ ビビ TI ロロ N - コ ロ 5 m ファ イル を コピ ー す る 


// エラ ー を 一 括 し て 処理 | マ 」 
functton fsErrCerr){ qtert(" エ ラー:"+err.code): } 

+。 faqlse): 

// ベン ダー プレ フィ ックス も 考慮 


wtndow.requestFiteSystem = wtndow.requestFtleSystem || wtndow.webkttRequestFtleSystem: 


HINI | 9 の Re assesAaweeeSeibeeeet 各 5 な assweycSASRPo2M の kao まま 〔 
ブラ ウザ に よっ て は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネッ トワ ー ク 環境 (Web : 
サー バー 上 ) で 確認 し て くだ さい 。 また 、 ルー トディ レク トリ に test.txt が ある こと と し ます 。 


HIN エ | ig EE ドム 机 す ー ーー 
Android で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 


index.html を Google Chrome で 表示 する と 、 ルー トディ レク トリ 上 に ある test.txt フ ァイル が 
コピ ビー され 、 コピ ー し た ファ イル 名 が 表示 され ます 。 


ファ イル を コピ ー す る 


testCopy1336410049816 tt+ と し て コピ ー し まし た 。 








index.html を Chrome for Android で 表示 する と 、 ルー トディ イレ クト リ 上 に ある testL.txt フ ァ イ 
ル が コビー され 、 コビー し た ファ イル 名 が 表示 され ます 。 


am に こ ee 
| WWwW.OPenSPC2.0rqg/ | 
Rmm Pr rr 


ファ イル を コピ ー す る 


IHV 9 は に 人 き 半 こ >4 ミト em 


testCopy1336409834706.ttt と し て コピ ビー し まし た 。 
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m 戸 ビ ピロ T| 口 N - ヨ ロ 5 mw ファ イル を コピ ー す る 


ファ イル を コピ ビー す る に は 
「copyTo()」 メ ソ ッ ド と 「getParent() 」 メソ ッ ド を 使う 


ファ イル を コピ ビー す る に は 、|「 fieEntry」 オブ ジェ クト の 「copyTo() 」 メソッド と | get 
Parent() 」 メ ソ ッ ド を 呼び 出し ます 。「copyTo() 」 メ ノッ ド が 実際 に コビー を 行い ます が 、 
その 際 、 親 デ ィ レ クト リ 情 報 が 必要 に な り ま す 。 その 親 デ ィ レ クト リ 情 報 を 取得 する の が 、 
| getParent() 」 メ ソ ッ ド で す 。 | getParent() 」 メ ソ ッ ド の パラ メー タ に は 、 成功 時 の コー 
ル バ ッ ク 関 数 を 指定 し ます 。 この コー ル バ ッ ク 関 数 に 、 取得 し た 親 デ ィ レ クト リオ ブ ジ ェクト 
が 渡さ れ ま す 。 


ロロ NEPUHINT 


次 に 「 fleEntry」 オ プ ジ ェ クト の | copyTo() 」 メ ノッ ド を 使い 、 ファ イル の コビー を 行い ま 
す 。 最初 の パラ メー タ に 親 デ ィ レ クト リ を 示す オブ ジェ クト を 指定 し ます 。 2 番目 の パラ メー 
タ に は 、 コビー し た 際 の 新た な ファ イル 名 を 指定 し ます 。 異な る デイ レク トリ に 同名 の ファ イ 
ル を コピ ビー する 場合 は 、 2 番目 の パラ メー タ は 省略 する こと が で きま す 。 

[copyTo() 」 メ ノッ ド の 3 番目 の パラ メー タ に は 、 コビー に 成功 し た と き の コ ー ル バッ ク 関 
数 を 指定 し ます 。 パラ メー タ に は 、| fileEntry」 オ ブ ジ ェクト が 渡さ れ ま す 。 | copyTo0() 」 
メソ ッ ド の 4 番目 の パラ メー タ に は 、 エラ ー 発 生 時 の コー ル バ ッ ク 関 数 を 指定 し ます 。 





が LR に IP コピ ーー 入 重 AM ene 信 CCY20BM3G0O ち 62294K く 22fRNIZOOG p.722 
e ファイ 小 の 款 動 と ファ イ 才 名 の 変更 弱 行 全く teet 和 2 は askntctcokos p.725 
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に 1ImglmlN 旭 clml= 
ディ レク トリ を コピ ー す る 


ここ で は 、 File API を 使っ て 作成 され た ディ レク トリ を コピ ー す る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<rmetg charset="utf-8"> 
<tttle>SqmpLe</title> 
<ScPtpt src="]s/saqmple.]S"></scrtpt> 
</head> 
<body> 
<h3> デ ィ レ クト リ を コピ ー す る </h3> 
<OutDut></OutDut> 
</body> 
</html> 


セロ | = ロ | 


和 


JavaScript の コー ド (sample.js) 
wtndow.addEventLtstener("1oad"。functton(){ 
var ele = document.getELementsByTagName( "output")[9]: 
wtndow.requestFtleSystem( 
// 処理 対象 は テン ボラ リ 領 域 
TEMPORARY, 
// 確保 する サイ ズ ( こ こ で は 意味 が な い の で の @) 
9, 
// 成功 時 の コー ル バ ッ ク 関 数 内 で 処理 を 行う 
functton(fs){ 
// Document デ ィ レ クト リ を コピ ー す る 
fs.root.getDirectory("/Document", 人 , 


| gl ze aal 








| 
| functton(dtrEntry){ 
W dtrEntry .getParentCfunction(targetDtr){ 
// Document 時 間 と いう 新た な 名 前 で コピ ー を 作成 
var ttme = Date.nowC): 


IdV 9 に に ま IEK4 ミ ドロ 


var newFtleName = "Document"+ttme: 
dirEntry.copyTo(targetDtr, newFtteName , function(copyftte){ 
ele.tnnerHTML = copyfitle.name+" と し て コピ ー し まし た 。 ": 
}, fsErr): 
} 
y SEPY う ? 
本 ょ 1 
2: 
+, fsErr 
う : 
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還 司 ビ ビ ロ TI 口 N - コ ロ ら 6 mw ディ レク トリ を コピ ー す る 


// エラ ー を 一 括 し て 処理 4 
function fsErrCerr){ alert(" エ ラー:"+err.code): } 

+, fatse): 

// ベン ダー プレ フィ ックス も 考慮 


wtndow.requestFtteSystem = wtndow.requestFtleSystem || wtndow.webkttRequestFt teSystem: 


ーー ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネッ トワ ー ク 環境 (We 
サー バー 上 ) で 確認 し て くだ さい 。 また 、 ルー トディ レク トリ に Document デ ィ レ クト リ が ある ここ と と 
し ます 。 


WS ww ネネ ボネ ホキ ドコ ポポ ドド さす ドイ ネ ボネ ネギ ネネ ドド ボボ ゴネ ホネ ド ネ ボネ ギ ネ イ ネネ ドド ネネ ネネ ギド ネネ ネネ ボネ ド ポ ボネ ドド キネ ドド で ネネ ホキ ギド ゴネ ボネ キネ キネ Nm キキ wa 


Android で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 


eeeaeaeeeewewahweSa や で や SN の NN さおり きる すす ポキ ポ ネネ ポ PPWW や ます キキ ドイ ボネ イド さ すやすや す や ポコ ネネ キキ ギド さ や さす ドキ ポポ キネ ゴネ や ネイ ボネ や る で ネネ 


index.html を Google Chrome で 表示 する と 、 ルー トディ イレ クト リ 上 に ある Document デ イレ ク 
トリ が コピ ー さ れ 、 コピ ビー し た ディ レク トリ 名 が 表示 され ます 。 


ディ レク トリ を コピ ー す る 


Document1336411662071 と し て コピ ー し まし た 。 





index.html を Chrome for Android で 表示 する と 、 ルー ト デ イ レク トリ 上 に ある Document 
ディ レク トリ が コピ ー さ れ 、 コピ ビー し た ディ レク トリ 名 が 表示 され ます 。 


| www_.ODenSDC2.0rq/ C 回 


IdV 9 に に きこ に に 45 


ディ レク トリ を コピ ー す る 


Document1336411543167 と し て コピ ー し まし た 。 
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還 E ビ ビビ TIHN- コ ロロ 6 m ディ レク トリ を コピ ー す る 







フイ レク トリ を コピ ー す る に は 「copyTo()」 メ ソ ッ ド と 
「getParent()」 メソッド や 「getDirectory()」 メソ ッ ド を 使う 


ディ レク トリ を コピ ー す る に は 、|「dirEntry」 オ ブ ジ ェクト の 「copyTo() 」 メ ソ ッ ド と 、「get 
Parent() 」 メ ソ ッ ド 、 また は 、| getDirectory() 」 メ ノッ ド を 使い ます 。「copyTo() 」 メ ソ ッ 
ド が 実際 に コピ ビー を 行い ます が 、 その 際 、 親 デ ィ レ クト リ 情 報 が 必要 に な り ま す 。 その 親 
ディ レク トリ 情報 を 取得 する の が 、| getParent() 」 メ ノッ ド で す 。「getParent() 」 メ ノッ ド 
の パラ メー タ に は 、 成功 時 の コー ル バ ッ ク 関 数 を 指定 し ます 。 この コー ル バ ッ ク 関 数 に 取 
得 し た 親 ディ レク トリ オプ ジェ クト が 渡さ れ ま す 。 また 、「 getDirectory () 」 メ ノッ ド を 使っ て 、 
指定 し た デイ レク トリ を 対象 に する 方 法 も あり ます 。 

次 に | dirEntry」 オ プ ジ ェ クト の 「 copyTo() 」 メ ソ ッ ド を 使い 、 ファ イル の コピ ー を 行い ま 
す 。 最初 の パラ メー タ に 、 親 ディ レク トリ を 示す オブ ジェ クト を 指定 し ます 。 2 番目 の パラ メー 
タ に は 、 コピ ー し た 際 の 新た な ファ イル 名 を 指定 し ます 。 異な る ディ レク トリ に 同名 の ファ イ 
ル を コピ ビー する 場合 は 、 2 番目 の パラ メー タ は 省略 する こと が で きま す 。 

| copyTo()」 メ ノッ ド の 3 番目 の パラ メー タ に は 、 コ ピー に 成功 し た と き の コ ー ル バッ ク 関 数 
を 指定 し ます 。 パラ メー タ に は 、| dirEntry」 オ ブ ジ ェクト が 渡さ れ ま す 。「copyTo() 」 メ ソ ッ 
ド の 4 番目 の パラ メー タ に は 、 エラ ー 発 生 時 の コー ル バ ッ ク 関 数 を 指定 し ます 。 
















関連 項目 | 
@ ファ イル を コピ ー す る も いす で PS D./ 1 @| 


EDT11UJN- コ ロン / 


ファ イル の 移動 と ファ イル 名 の 変更 を 行う 





ここ で は 、File API を 使っ て 作成 され た ファ イル を 移動 する 方 法 と ファ イル 名 を 変更 する 方 
法 に つい て 解説 し ます 。 


= が | 画 = 二 中 mlm】 半 HTML の コー ド (index.html) 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>SampLe</t1tle> 
<SCrtpt src="]S/sample .]S "></SCr1Dt> 
</head> 
<body> 
<h3> フ ァイル を 移動 する </h3> 
<OuUtDut></OUtDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . addEventListener("Loaqd" functton(){ 
var ele = document.getELementsByTagName( "output")[9] : 
window.requestFtleSystem( 
// 処理 対象 は テン ボラ リ 領 域 
TEMPORARY, 
// 確保 する サイ ズ ( こ こ で は 意味 が な い の で 9@) 
9, 
// 成功 時 の コー ル バ ッ ク 関 数 内 で 処理 を 行う 
functton(fs){ 
// test.txt を 移動 する 
fs.root.getFite("/test.txt"。 け , 
functton(ftleEntry)+ 
// Document デ ィ レ クト リ に 移動 
fs.root.getDitrectory("Document"。 全 。 functton(tagrgetD1r)1 
// 同じ 名 前 で 移動 
fiteEntry .moveTo(targetDtr, "test.txt" 。 functton(movefttle)+ 
// 移動 先 の ファ イル パス を 取得 
var fullPath = moveftle.fullLPath: 
ele.tnnerHTML = moveftte.name+" を "+fultPath+" に 移動 し まし た 。 ": 
すん るる に か が) は 


い 


時 
エ 
ルン 
TU 
ゴ 
中 : 
| : 





IdV 引 ゴ 


} 
を る SEP やう 5 
}, fsErr 
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き ビ ビビ ピロ TI ロロ NN - コ ロワ WW ファ イル の 移動 と ファ イル 名 の 変更 を 行う 


93 ト 」 
+, fsErr 
): 
// エラ ー を 一 括 し て 処理 
functton fsErr(err){ golert(" エ ラー:"+err.code): } 
}, fatse): 
// ベン ダー プレ フィ ックス も 考慮 


wtndow.requestFtleSystem = wtndow.requestFtteSystem || wtndow.webkttRequestFtleSystem: 


WP ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネッ トワ ー ク 環境 (Web 


サー バー 上 ) で 確認 し て くだ さい 。 また 、 ルー トディ レク トリ に test.txt と Document デ ィ レ クト リ が 
ある こと と し ます 。 


ml 


Androld で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 


index.html を Google Chrome で 表示 する と 、 ルー トディ レク トリ に ある testitxt が 、 同じ ルー 
トディ イレ クト リ 上 に ある Document 内 に 移動 され 、 ファ イル 名 と 移動 先 の パス が 表示 され ます 。 


ファ イル を 移動 する 


test txt を /Document/test tt に 移動 し まし た 。 





index.html を Chrome for Android で 表示 する と 、 ルー トディ レク トリ に ある testLtxt が 、 同 
じ ル ー ト ディ レク トリ 上 に ある Document 内 に 移動 され 、 ファ イル 名 と 移動 先 の パス が 表示 され 
ます 。 


www_ODenSDC2.orq/ 


ファ イル を 移動 する 


testtxt を /Documenttesttxt に 移動 し まし た 。 





呈 ビビ ロ 征 | 口 ト | - ヨ ロワ mw ファ イル の 移動 と ファ イル 名 の 変更 を 行う 


mm 上 ファ イル の 移動 や ファ イル 名 の 変更 に は 「moveTo()」 メソ ッ ド を 使う 


ファ イル を 移動 する に は 、「fiileEntry」 オ ブ ジ ェクト の 「moveTo() 」 メ ソノ ッ ド を 使い ます 。 
「moveTo() 」 メ ノッ ド は 2 つの 機能 が あり ます 。 1 つ は ファ イル を 移動 する 機能 、 も う 1 つ 
が ファ イル 名 を 変更 する 機能 で す 。「moveTo() 」 メ ノッ ド で は 移動 先 が 同じ ディ レク トリ 
で 新しい 名 前 が 指定 され た 場合 、 ファ イル 名 の 変更 処理 を 行い ます 。 移動 先 が 供 な る 
ディ レク トリ の 場合 は 、 フ ァイル を その ディ レク トリ に 移動 させ ます 。 

「moveTo() 」 メ ノッ ド の 最初 の パラ メー タ に は 、 基準 と な る ディ レク トリ 情報 が 必要 に な 
り ま す 。 ディ レク トリ 情報 を 取得 に は 、「 getParent() 」 メ ソ ッ ド 、 ま た は 、|「 getDirectory() 」 
メソ ッ ド を 使い ます 。 

「moveTo() 」 メ ノッ ド の 2 番目 の パラ メー タ を 省略 し た 場合 は 、 最初 の パラ メー タ で 指 
定 し た ディ レク トリ に 同じ 名 前 で ファ イル が 移動 し ます 。 2 番目 の パラ メー タ に 名 前 を 指定 
する と 、 それ が 新た な ファ イル 名 と な り ま す 。 

「moveTo() 」 メ ソ ッ ド の 3 番目 の パラ メー タ に は 、 移動 、 ま た は 、 名 前 の 変更 に 成功 し 
た と き の コ ー ル バッ ク 関 数 を 指定 し ます 。 パラ メー タ に は 、| fileEntry]」 オ プ ジ ェ クト が 渡さ 
れ ま す 。「moveTo() 」 メ ソノ ッ ド の 4 番目 の パラ メー タ に は 、 エラ ー 発 生 時 の コー ル バ ッ ク 
関数 を 指定 し ます 。 


















関連 項目 


@ ファ イル を コピ ビ ピー する 時 Mb マ す やせ せ すす で で で と くく ルミ ま YK 続 4 が た た なお 9 es 軍人 lx ev ws s D./19 
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EL TILUN- は 回 


URL 形式 で ファ イル に アク セス する 








ここ で は 、 File API を 使っ て 保存 で きる ディ スク 上 に ある ファ イル を URL 形式 で アク セス する 
方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<SCrtpt src="]Ss/saqmple.]S "></scrtpt> 
</heqd> 
<body> 
<h3> フ ァイル の URL を 表示 </h3> 
< く OU 上 Dut キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .gddEventLtstener("1ogd"。 functton(){ 
Var ele = document .getELementsByTagName( "output")[@] : 
wtndow. requestFileSystem( 
// ファ イル の 作成 先 を テン ボラ リ 領 域 に する 
TEMPORARY, 
// 確保 する サイ ズ C1924bytes メ 199 = 199KB) 
1924*100 , 
// 成功 時 の コー ル バ ッ ク 関 数 
functton(fs)† 
// sqgmple.txt フ ァイル 情報 を 取得 
fs .root.getFtle("sqmpte.txt"。{ }, 
functton(fiteEntry){ 
ele.tnnerHTML = fitleEntry.name+" フ ァイル の URL は 以下 の 通り で す <br>": 
ele.tnnerHTML += fileEntry.toURLC): 
}, 
// 失敗 時 の コー ル バ ッ ク 関 数 
functton(err){ ele.tnnerHTML = "ファ イル 生成 エラ ー : "+err.code: } 
2: 
}, 
// 失敗 時 の コー ル バ ッ ク 関 数 
functton(Cerr){ ele.tnnerHTML = "エラ ー:"+err.code: } 
う : 
}, false): 
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mE ビ TI ロ N-3 ロ mw URL 形式 で ファ イル に アク セス する 


// ベン ダー プレ フィ ックス も 考慮 公 4 


wtndow.requestFiteSystem = window.requestFtteSystem || wtndow.webkttRequestFtleSystem: 


om ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネッ トワ ー ク 環境 (Web 
サー バー 上 ) で 確認 し て くだ さい 。 


回 四 還 田 - 


Android で は 、 Chrome for Android で 対応 し て いま す 。 Android 4.1 か ら は デフ ォ ル ト の ブラ ウ 
ザ が Chrome に な っ て いる の で 、 その まま 動作 し ます 。 


index.html を Google Chrome で 表示 する と 、 指定 し た ファ イル の URL が 表示 され ます 。 





ファ イル を 作成 し URL を 表示 


sampls tt ファ イル の URL は 以下 の 通り で す 
flesystemhttp://www.openspc2 org/temporary/sample や 





imdex.html を Chrome for Android で 表示 する と 、 指定 し た ファ イル の URL が 表示 され ます 。 


| w wwWwW W.OPenSPC2. or9/ 





ファ イル を 作成 し URL を 表示 


sample.bt フ ァイル の URL は 以下 の 通り で す 
filesystem'http//www_.openspc2.orq/temporary/sample.txt 


IdV 9|- ETTERZEF 
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m ビ ビビ TI ロ NI - コ ロロ 日 m URL 形式 で ファ イル に アク セス する 


ms 上 ファ イル や ディ レク トリ は URL 形式 で アク セス する こと が で きる 


File API で 使用 可能 な ディ スク 領域 に 保存 8 きれ て いる ファ イル や ディ レク トリ は URL 形 
式 で アク セス する こと が で きま す 。 これ は 、 次 の 形式 で 指定 し ます 。 







fitsystem:【 オ リジン 】/【 種 類 】/ 


オリ ジン は | http://www.openspc2.org:8080/」 と いっ た ドメイン と ポー ト 番 号 の 組み 
合わ せ で す 。 種類 は 永続 的 に 保存 する 領域 の ファ イル の 場合 は 「persistent」、 一 時 的 
な 信 域 の 場合 は | temporary」 に な り ま す 。 た と えば 、 一 時 的 に 保存 され て いる 領域 の 
ルー トディ レク トリ に ある | sample.txt」 で あれ ば 、 次 の よう に な り ま す 。 









ftlesystem: http://wwW.openspc2.org/persistent/sqmple .txt 


Google Chrome で は 、 この URL を アド レス 欄 に 入力 すれ ば ファ イル 内 容 を 確認 する こ 
と も で きま す 。 また 、 画像 で あれ ば 、「img」 要素 の [src」 属 性 に 指定 する こと も で きま す 。 
この 場合 、 File API で 保存 され て いる 領域 内 に ある デー タ が 読み 出さ れ 使 用 きれ ます 。 
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eBase64 エ ンコ コー デコード する ツー ミド ドア い 「 435327207 3 池坊: p.27 ら 
e ペー ジ の UHL を 取得 ・ 設 定 す る ………… PTZXA 7AYY チ YY YY すん 7 て くく て す D.307 
き Canvas の 画像 デー タ を datgUHL 形式 に 変換 する の 1 人 入る 2 が 件 博夫 D.5 ら / 
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LIE9 』Chrome Safari 5 | Firefox 4 | Opera11 1 iOS4 | Android2 1WP_ 


EDUDTIUHN- ヨ ロワ 9 


一 度 だ け 位 置 情 報 を 求め る 


ここ で は 、 HTML5 の Geolocation API を 使い 、 一 度 だ け 位 置 情 報 を 求め る 方 法 に つい 
て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Sample</ttt1e> 
<Scrtpt src="]s/sample.]S "></scrtpt> 
</head> 
<body> 
<OUtDu キ ></OutDut> 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.aqddEventLtstener("toad"。 functton(){ 
var ele = document.getELementsByTagName("output")[9]: 
// Geotocgtion API が 使え る か 調べ る 
tf (!naqvtgator.geolocatton){ 
ete.innerHTML = "Geotocation APT は 使え ませ ん ": 
return: 
} 
// 一 度 だ け 位 置 情 報 を 取得 する 
nagvtgator.geolocoatton.getCurrentPositton(functtonCpositton){ 
// 緯度 を 求め る 
var lat = posttton.coords . 1gtttude : 
// 経度 を 求め る 
var lon = posttton.coords . 1ong1tude : 
// 紳 度 経度 の 誤差 を 求め る 
Var' qcc = POS1tton . Coords . aqCcuracy: 
// 高度 を 求め る 
Var alt = positton.coords . alLt1tude : 
// 高度 の 誤差 を 求め る 
Var qccAlt = positton. coords . glt1tudeAccuraCcy: 
// 結果 を 出力 
ele.innerHTML = " 紳 度 :"+Lgt+"<br>": 
ele.innerHTML += "経度 :"+1on+"<br>": 
ele.innerHTML += "緯度 経度 の 誤差 :"+qcc+"m<br>": 
ete.tnnerHTML += "高度 :"+qlt+"<br>": 
ele.tnnerHTML += "高度 の 誤差 :"+occAlt+"<br>": 








m 呈 ビ ロイ 丁 | 口 N! - コ ロワ m 一 度 だ け 位 置 情 報 を 求め る 


+,functton(err)t 4 
// エラ ー の 場合 。 エラ ー コ ー ド を 出力 
ele.itnnerHTML = "エラ ー:"+err.code: 


}1 
// 詳細 な 位置 を 返す よう に 設定 


enabteHtghAccuracy : true 
}): 
+。fqlse): 


ブラ ウザ に よっ て は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネ ットワーク 環境 (Web 
サー バー 上 ) で 動作 を 確認 し て くだ さい 。 


ブラ ウザ で index.html を 表示 する と 、 位置 情報 を 取得 し て も る よい か どう か の 確認 が 行わ れ 
ます 。 ここ で 拒否 する と 、 位置 情報 は 取得 で きま せん 。 


index.html が 、 ユ ー ザ ー の 物理 的 な 位置 の 追跡 を 要求 “ 





許可 する と 、 取得 し た 位置 情報 が 表示 され ます 。 


緯度 : 36.650002 
経度 : 138.183304 


緯度 経度 の 誤差 : 4828m 
融 度 : muil 
両 度 の 誤差 : ul 





本 ま 失 和 電位 置 情 報 を 一 度 だ け 取 得する に は Geolocation API の 
「getCurrentPosition() 」 メソッド を 使う 


位置 情報 を 一 度 だ け 取 得する に は 、 Geolocation API の | getCurrentPosition () 」 
メソ ッ ド を 使い ます 。「getCurrentPosition () 」 メ ノッ ド の 最初 の パラ メー タ に は 、 位置 
情報 の 取得 に 成功 し た 場合 に 呼び 出さ れる 関数 を 指定 し ます 。2 番 目 の パ ラメ ー タ に は 、 
位置 情報 が 取得 で き な か っ た 場合 、 つま り 、 エラ ー 時 の 処理 を 行う 関数 を 指定 し ます 。 
2 番目 の パラ メー タ は 必須 で は な い の で 省略 する こと が で きま す 。 3 番目 の パラ メー タ は 、 
位置 情報 の 取得 に 関す る オプ ショ ン を 設定 し ます 。 指定 で きる オプ ショ ン は 、 次 の 表 の よ 
うに な り ま す 。 
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POSITION_UNAVAILABLE 
TIMEOUT 

















タイ ム ア ウ ト ま で の 時 間 を ミリ 秒 で 指定 する 
ン で は バッ テリ ー の 消耗 が 激しく な る 。 また 、 パ ソコ ン の 場合 
な い 場 合 は 、 エ ラー に な り ま す 。 他 に も 、 位置 情報 が 取得 で き な い 、 時 間切 れ ( タ イム アウ 
エラ ー メ ッ セ ー ジ は | message」 プロパ ティ に 格納 さん れん てい ます 。 
提供 を 拒否 し た 
の 
位置 情報 を た 示す プロ パテ ィ は 、 次 の 表 の よう に な り ま す 。 緯度 と 経度 は 、 世界 測地 系 
説明 
度 
度 
高度 。 取得 で き な い 場合 は [nulll 、 も し く は 、「[undefined」 


「true」 を 指定 する と 、 詳細 な 位置 を 返す よう に する 。 た だ し 、 
取得 し た 位置 情報 を 何 ミ リ 秒 有効 に する か 指定 する 。「0」 を 
maximumAge 
は 「0」 を 指定 し て も 最新 の 情報 が 返さ れ な い 場 合 が ある 
ト ) の 場合 は 、 次 の 表 に 示す エラ ー が 返さ れ ま す 。 この エラ ー コ ー ド は 、 エラ ー 発 生 時 に 
キー ワー ド 値 6 に 製 用 1 
何ら か の 原因 で 位置 情 
位置 情報 が 取得 で きた 場合 に 呼び 出さ れる 関数 に は 、 オプ ジェ クト が 渡さ れ ま す 。 こ 
WGS84 に 準拠 し て いま す 。 


琴 王 ピ TI ロ NN - ヨ ロワ wm 一度 だ け 位 置 情 報 を 求め る 
スマ ー ト フォ ン で は バッ テリ ー の 消耗 が 激しく な る 
指定 する と 、 常 に 最新 の 位置 情報 に な る 。 た だ し 、 ス マー ト フ ォ 
位置 情報 を 得る に は 、 ユー ザー の 許可 が 必要 に な り ま す 。 ユー ザー の 許可 が 得 ら れ 
呼び 出さ れる 関数 に 渡さ れる オブジェ クト の 「code」 プ ロ パ ティ に 格納 さん て いま す 。 ま た 、 
| PERMISSION_DENIED ユー ザー が 位置 情報 の 
の オブ ジェ クト 内 に ある [coords」 オブ ジェ クト に 位置 情報 を 示す プロ パテ ィ が あり ます 。 
度 と 経度 の 誤差 。 単位 は メー トル 。 


高度 の 誤差 。 単位 は メー トル 。 
移動 方 向 。 移動 し て いな い 場 合 は [null 、 も し く は 、「undefined] 


移動 速度 。 単位 は m/sec 
これ ら の 位置 情報 が いつ 取得 され た か は 、 関数 に 渡さ きれ た オプ ジェ クト の 「time 
stamp」 プ ロ パ ティ で 読み 出す こと が で きま す 。 | timestamp」 プ ロ パ ティ に は 、 1970 年 1 
月 1 日 午前 0 時 か ら の ミリ 秒 が 入っ て いま す 。 


[」 
よ 
ア 
1 
ーー 
呈 
ル 1 
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LIE9 1 Chrome 1 Safari 5 | Firefox 4 1 Opera 11 1 iOS4 | Android 2 !WP_ 


EE おま ド 9 


定期 的 に 位置 情報 を 取得 ・ 停 止 する 


ここ で は 、 HTML5 の Geolocation API を 使い 、 定期 的 に 位置 情報 を 求め る 方 法 と 、 定期 
的 な 監視 を 解除 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<titte>SampLe</t1tle> 
<SCrtpt src="]S/sample .]S "></SCr1Dt> 
</head> 
<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .addEventLtstener("1ogd" 。 functton()+ 

var ele = document .getEtementsByTagName( "output" う [の]: 

// Geolocatton API が 使え る か 調べ る 

tf (!ngvigator .geolocatton)+ 
ele.itnnerHTML = "Geotocation API は 使え ませ ん ": 
return: 

} 

// 定期 的 に 位置 情報 を 取得 し 表示 する 

var watchID = navigator.geolocgtion .watchPositton(functton(posttton){ 
// 緯度 を 求め る 
var lat = posittton. Coords . Latttude: 
// 経度 を 求め る 
var lon = positton.coords . 1ong1tude: 
// 緯度 経度 の 誤差 を 求め る 
var acc = POS1t1On . Coords . qCCUPQCcy 
// 高度 を 求め る 
var qlt = posttton.Coords . alt1tude: 
// 高度 の 誤差 を 求め る 
Var qccAlt = posttton . COords .qLt1tudeAcCuracy: 
// 結果 を 出力 
ete.tnnerHTML = "緯度 :"+Lat+"<br>": 
ele.tnnerHTML += "経度 :"+Lon+"<br>": 
ele.tnnerHTML += "緯度 経度 の 誤差 :"+qcc+"m<br>": 
ele.tnnerHTML += "高度 :"+qtLt+"<br>": 
ele.tnnerHTML += "高度 の 誤差 : "+oqccAlt+"<br>": 
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m ビ ビ TI ロ N- ヨ 1 口 m 定期 的 に 位置 情報 を 取得 ・ 停 止 す る 


+,functtonCerr){ K 学 | 
// エラ ー の 場合 。 エラ ー コ ー ド を 出力 
ele.tnnerHTML = "エラ ー:"+err.code: 

1 
// 詳細 な 位置 を 返す よう に 設定 
enableHtghAccuracy : true 

}): 

// 19 秒 経過 し た ら 取 得 を 停止 する 

setTimeout(functton(){ 
navtgator.geolocatton.clearWatchCwatchTD): 
ete.innerHTML += "位置 情報 の 取得 を 停止 ": 

},。 1999*19)・ 

}, false): 


M HINIT | ee 
プラ ウザ に よっ て は 。 ロー Sr その 場合 は 、 ネッ トワ ー ク 環境 (Web : 
サー バー 上 ) で 動作 を 確認 し て くだ さ 


らら の の の お らら の らら の の の らら お や ゐる の お の らら の の pe の の の の の の ゐ よ ひみ の る る の の な の る の の の の な の の みる な の の ひで な や の の も ちの の の な ゆる の ひひ の の おら の の の の の の ⑥ の 6⑥ ゆ 必 の の の ひ の ら の ゅ の の ひひ の の ふのり の の ら ゆ の の の の の の の の の の の る ひひ の の か る の の の の る の の ゆ ゆ の の の の の の の 9 さる の @⑥@ る る な みる ag 


ブラ ウザ で index.html を 表示 する と 、 位置 情報 が 表示 され ます 。 な お 、 この 前 に 位置 情報 
の 取得 を 行っ て も よい か どう か の 確認 メッ セー ジ が 表示 され る こと が あり ます 。 


緯度 : 36.650002 

| 経度 : 138.183304 
紀 度 経度 の 誤差 :4828m 
高度 : null 


度 の 誤差 :all 





10 秒 間 だ け 位 置 情報 を 取得 し 、 10 秒 経過 し た ら 取 得 を 停止 し て 、 そ の 旨 の メッ セー ジ が 
表示 され ます 。 


緯度 : 36.650002 
経度 : 138.183304 

| 旨 度 経度 の 語 差 :4828m 
融 度 : nuil 


高度 の 誤差 :mail 
位置 情報 の 取得 を 停止 





時 ビ ピロ T| 品 NN - ヨ 1 ロロ mW 定期 的 に 位置 情報 を 取得 ・ 停 止 す る 


定期 的 に 位置 情報 を 取得 する に は 「watchPosition()」 メソッド 、 
停止 する に は 「clearWatch()」 メソッド を 使う 


定期 的 に 位置 情報 を 取得 する に は 、「watchPosition ()) 」 メ ソ ッ ド を 使い ます 。 位置 情 
報 を 取得 する メソ ッ ド と し て は [「 getCurrentPosition () 」 メ ソ ッ ド が あり ます が 、 状況 に よっ 
て は 位置 情報 が 取得 で き な い 場合 が あり ます (地下 や トン ネル 内 な ど ) 。 この よう な 場合 
は 、|「 watchPosition() 」 メ ソ ッ ド の 方 が 向い て いま す 。 た だ し 、「 watchPositon () 」 メ ソ ッ 
ド は 定期 的 に 位置 情報 を 取得 する た め 、 スマ ー ト フォ ン で は バッ テリ ー の 消耗 が 激しく な 
り ま す 。 

そこ で 、 一 定期 間 だ け 位 置 情報 を 取得 、 も し く は 、 期待 する 精度 の 位置 情報 が 取得 
で きた ら 、 監視 を 停止 する 方 法 が あり ます 。「 watchPosition ) 」 メ ソ ッ ド の 動作 を 停止 
する に は 、| clearWatch () 」 メ ソ ッ ド を 使い ます 。 パラ メー タ に は 、| watchPosition)」 メ 
ソ ッ ド が 返す タイ マーID を 指定 し ます 。 


mal 和 N 還 枕 用 が 利用 で きる か 調べ る に は 


ブラ ウザ の 進歩 は 非常 に 速く 、 ど の 機能 が 使え る の か 把握 する の が 難し く な っ て いま 
す 。 その よう な 場合 に 便利 な の が Modernizr で す 。 Modernizr を 使え ば 、 特定 の 機能 
が 利用 で きる か どう か を 手軽 に 判別 する こと が で きま す 。 Modernizr に つい て は 、 次 の 
ペー ジ を 参照 し て くだ さい 。 
sw Modernizr: the feature detection IiDrary for HTML5/CSS3 
http://modernizr.COom/ 
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ゅ 一 度 だ け 位置 情報 を 水 め る ドー の の の いい RU2ttOCRR DNS026 RPC202tARR2 D.732 


ロロ NEPUINT 
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Web Storage に デー タ を 設定 する 





ここ で は 、 Web Storage に デー タ を 設定 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<mietq charset="utf-8"> 
<tttle>Sample</ttt1e> 
<SCr1Dt Src="]S/sqmple.]S"></scP1tDpt> 
</head> 
<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


window.qddEventLtstener("1oad" 。 functton(){ 
var ele = document.getEtementsByTagName( "output")[9] : 
// ロー カル スト レー ジ が 使え る か 調べ る 
1f (!locaLStorage){ 
ete.tnnerHTML = "ロー カル スト レー ジ は 使え ませ ん ": 
Peturn: 
} 
1ocgtStorage.setTtem("C&R", "研究 所 "): 
tocatStorage .book = "JavaScrtpt"・ 
tocatStorage[ "prtce"] = 3980: 
etle.innerHTML = "ロー カル スト レー ジ に デー タ を 保存 し まし た ": 
}, faqlse): 


時 品 
IE9ー 10 で は 、 ロ ー カ ル 上 で は ロー カル スト レー ジ を 利用 する こと が で きま せん 。 この た め 、「local 
Storage」 は 「undefined」 と な り ま す 。 


プラ ウザ で index.html を 表示 し 、 ロー カル スト レー ジ に デー タ が 保存 され る と 、 保存 し た 旨 の 
メッ セー ジ が 表示 され ます 。 


ロー カル スト レー ジ に デー タ を 保存 レ し まし た 





mm ビビ ロイ TI 口 N- ヨ 11 mWeb Storage に デー タ を 設定 する 


ロー カル スト レー ジ が 使え な い 場 合 は デー タ は 保存 され ず 、 メッ セー ジ だ けが 表示 され ます 。 


ロー カル スト レー ジ は 使え ませ ん , 



















呈 スト レー ジ を 利用 する に は 
s 記 MI 「sessionStorage」 や 「localStorage」 を 使う 


Web Storage に は 、 2 種類 あり ます 。 1 つ は 、 同じ セッ ショ ン 間 で デー タ を 共有 で きる 
「sessionStorage」 で す 。 も う 1 つ は 、 ロー カル ディ スク 上 に デー タ を 保存 で きる | local 
Storage」 で す 。 いずれ も ゃ 保存 容量 に 制限 が あり ます が 、 設定 や 実行 環境 に よっ て 異な 
り ま す 。 スト レー ジ 人 容量 と し て は 5MB が 目安 と な っ て いま す 。 

スト レー ジ に 保存 で きる デー タ は 同一 オリ ジン (プロ トコ ル 、 ポー ト 名 、 ド メイ ン 名 が 同一 ) 
で 共有 され ます 。 オリ ジン が 異な る と 、 保存 領域 は 別に 割り 当て られ ます 。 美 な る オリ ジン 
の スト レー ジ に は アク セス する こと は で きま せん 。 

スト レー ジ に デー タ を 設定 する に は 、 3 つの 方 法 が あり ます 。 

1 つ 目 は 、「setItem() 」 メ ノッ ド を 使う 方 法 で す 。 最初 の パラ メー タ に キー 名 、 2 番目 の 
パラ メー タ に 保存 する デー タ を 指定 し ます 。 2 つ 目 は 、「localStorage[ キー 名 」= デ ー タ 」 
の よう に 、 配列 形式 を 利用 する 方 法 で す 。 3 つ 皮 は 、| localStorage. プ ロ パ ティ 名 = デー 
タ | の よう に 、 TavaScript の オブ ジェ クト + プ ロ パ ティ 名 の 形式 で 指定 する 方 法 で す 。 3 つ 





め の 指 定 方 法 で は 、 キー 名 に は 特殊 記号 や 空白 を 含め る こと は で きま せん 。 ロ 
レン 

' n 

1 
e Web Storage か ら デ ー タ を 読み 出す …… oe p.740 
e Web Storage 内 の すべ て の キー と 値 を 取得 する …… oooeeeerrrrrr D.742 に 
e Web Storage の 特定 の デー タ を 削除 する …… ド ドド iiirom p.744 に 
e Web Storage の すべ て の デー タ を 削除 する …… ド ememeererererrnrrnrrn 一 p.746 の 
e スト レー ジ 内 容 が 変更 され た 際 の イベ ント を 設定 する ……… ド orrnm p.748 
elIndexed Database に デー タ を 書き 込む ……… ひ に ドド ポー p.84 1 上 
ア 
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Web Storage か ら デ ー タ を 読み 出す 








ここ で は 、 Web Storage か ら デ ー タ を 読み 出す 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<rmetq charset="utf-8"> 
<tttle>Sample</t1t1e> 
<SCrtDt Src="]S/sample.]S "></scrtpt> 
</heqd> 
<body> 
<OUutDu モ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd"。 functton()t 
var ele = document.getEtementsByTagName( "output")[9] : 
// ロー カル スト レー ジ か ら C&R の キー の 値 を 読み 出す 
var myData1 = localStorage .getTtem("C&R"): 
if (!myData1){ myDataq1 = "C&R キ ー が あり ませ ん ": 1} 
// ロー カル スト レー ジ か ら book の キー の 値 を 読み 出す 
var myDatg2 = localStorgge .book: 
if C!myData2){ myData2 = "book キ ー が あり ませ ん ": } 
// ロー カル スト レー ジ か ら book の キー の 値 を 読み 出す 
var myDatg3 = locatStorage[ "prtce"]: 
tf (!myDato3){ myData3 = "prtce キ ー が あり ませ ん ": } 
// 読み 出し た 結果 を 出力 
ele.1nnerHTML = "C&R: "+myData1 : 





ele.1nnerHTML += "<br>book: "+myDatga2: 
ele.tnnerHTML += "<br>prtce: "+myDato3: 
}, fgqlse): 


HINIT|-| bo 直 ce 
IE9ー 10 で は 、 ロー カル 上 で は ロー カル スト レー ジ を 利用 する こと が で きま せん 。 この た め 、 ロー 
カル 上 で は デー タ を 読み 出す こと は で きま せん 。 


ldV 計 NGG 1W」H EE に IE に 4Se 


ブラ ウザ で index.html を 表示 し 、 ロー カル スト レー ジ か ら デ ー タ を 読み 出し た 結果 は 、 次 の よ 
うに な り ま す 。 これ は 、 キー が 存在 する 場合 で す 。 
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ロー カル スト レー ジ に デー タ が な い 場 合 は 、 次 の よう に 表示 され ます 。 


民 Sample X 
C&R:C&R キ ー が あり ませ ん , 


book: book キ ー が あり ませ ん 
price: price キ ー が あり ませ ん 


mslNl 画 スト レー ジ か ら 読 み 出 す に は 「getltem()」 メソッド を 使う 


Web Storage に 保存 され た デー タ を 読み 出す に は 、| getItem () 」 メ ノッ ド を 使い 、 パ 
ラメ ー タ に は キー を 指定 し ます 。 該当 する キー が な い 場 合 、| getItem () 」 は 「null」 を 返 
し ます (| undefned」 で は な い ) 。 

保存 され た デー タ を 読み 出す 方 法 に は 、| getItem() 」 メ ノッ ド を 使う 以外 に も あり ます 。 
キー 名 に 空白 や 特殊 記号 を 含ん で いな い 場 合 は 「localStorage. キ ー 名 」 や 「session 
Storage. キ ー 名 」 の よう に 、 オブ ジェ クト の プロ パテ ィ と し て 指定 し 読み 出す こと が で きま 
す 。 キー が 存在 し な い 場 合 は 、「null」 、 また は 、「undefned」 に な り ま す (プラ ウザ に よっ 
て 返さ れる 結末 が 異な る )。 

また 、 配列 (ハッ シュ ) 形式 で も 指定 する こと が で きま す 。 この 場合 は 、「 localStorage 
[| キー 名 」」「 sessionStorage[ "キー 名 "] 」 と し て デー タ を 読み 出す こと が で きま す 。 配列 
形式 で 指定 し た 場合 、 該当 する キー が な いと 「null」、 また は 、「undefined」 を 返し ます 。 


関連 項目 ょ ょ ぃ 





IdV 計 NGGT]WTH 本 に FEED4 ミ F 


eWeb Storage に デー タダ 設定 する …… ビ … 衝 …… ビ ドビー イー ドド ドド D.738 
@ Web Storage 内 の すべ て の キー と 値 を 取得 する で 他人: めす 人 91 60 の 0 や 人 徹 を も お る を を ee を 60 D./4 ら 
eWeb Storage の 特定 の デー タ を 削除 する …… 上 … の (il ぞ 全 條 ドド ドド ドー の D.744 
eWeb Storage の すべ て の デー タ を 削除 する … 償 ひ li ビー ドド ドー p.746 
e スト レー ジ 内 容 が 変更 され た 際 の イベ ント を 設定 する ………… ド ti… ド ー の 科 TOsy UP p.748 
@ ndexed Database か ら デ ー タ な を 読み 出す 和信! お すさ まさる は 4 の まな WIR は ある の 84 D.845 
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Web Storage 内 の すべ て の キー と 値 を 
取得 する ーー 
ここ で は 、 Web Storage 内 の すべ て の キー と 値 を 取得 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<heqd> 
<meta Charset="utf-8"> 
<tttle>SampLe</t1t1e> 
<SCP1PDt Src="]S/sample .]S"></Scrtpt> 
</head> 
<body> 
<OutDu モ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1Logd" 。 functton(){ 
var ele = document.getEtementsByTagName( "output")[9] : 
// ロー カル スト レー ジ か ら す べ で て の キー を 読み 出し て 出力 する 
for(var 1= の : 1t<locqlStorage .1ength: 1++){ 
// キー を 読み 出す 
var tempKey = locaglStorgge . key(1): 
var datag = localStorgge .getTtem(tempKey): 
// キー と 値 を 出力 
ele.1nnerHTML += tempKey+" = "+dato+"<br>"・: 
} 
}, faqtse): 


IHlINIT| Ne ' ' Ne: 2 
IE9ー10 で は 、 ロー カル 上 で は ロー カル スト レー ジ を 利用 する こと が で きま せん 。 この た め 、 ロー 
カル 上 で は デー タ を 読み 出す こと は で きま せん 。 





ブラ ウザ で index.html を 表示 する と 、 ロー カル スト レー ジ 内 の キー を 読み 出し 、 そ の キー を 
元 に 読み 出し た 内 容 が まとめ て 表示 され ます 。 


IdVS 計 NGGTWTH ココ ヨ ュ コマ ロロ 





742 


呈 王 ビ ロロ T| ロ N!- コ 1 コ mw Web Storage 内 の すべ て の キー と 値 を 取得 する 


mmlSl 下 キー を 取得 する に は 「key()」 メ ソ ッ ド を 使う 


Web Storage は 、 Key Value Store 方 式 で デー タ を 格納 し て いま す 。 この た め 、 キー 
が わか ら な いと デー タ を 取り 出す こと が で きま せん 。 Web Storage で は 、 同じ オリ ジン で 
あれ ば 、「key() 」 メ ソ ッ ド を 使っ て すべ て の キー を 取得 する こと が で きま す 。 キー を 取得 
し て し まえ ば 、 後 は 自由 に 内 容 を 読み 出し た り 変 更 す る こと が で きま す 。 スト レー ジ に 、 ど 
の <〈⑮ い の キー が ある か は 、「localStorage.length」 | sessionStorage.length」 の よう に 、 
「length」 プ ロ パ ティ で 求め る こと が で きま す 。 

「key () 」 メ ノッ ド は 同じ オリ ジン 内 の すべ て の キー を 読み 出す こと が で きる た め 、 同じ オ 
リジン で 複数 の ユー ザー が 共同 で 利用 し て いる よう な 場合 に は 注意 が 必要 で す 。 


mm 部 N 問 還 VVGD StOrage に 保存 ご べ れ て いる 内 容 を 調べ る 


ブラ ウザ に 用 意 き され ん て いる デバ ッ グ ツー ル を 使う と 、 次 の 図 の よう に 、 Web Storage に 
保存 され て いる デー タ を 確認 し た り 、 削除 ・ 変 更 す る こと が で きま す 。 な お 、 TE9 の 開発 
者 ツー ル に は 、 Web Storage を 処理 する 機能 は あり ませ ん 。 



















IQ S Resources 3 


4 すさ 提 の 3 | 


ED 





@ Web Storage に デー タ を 設定 する 二 あ の が を AU: と に し た ぶす く ん て て ルイ てく OKUEPEKX も D./38 
@ VVeb Storage か ら デ ー タ を 読み 出す 計れ 4 人 入 き 迷 き あな 江守 Dp.740 
e Web Storage の 特定 の デー タ を 削除 する …… ドド iiioeeeerenrnrnrrnn p.744 
e Web Storage の すべ て の デー タ を 削除 する …… パ ドド ET p.746 
と 】 スト レー ジ 内 容 が 変更 され た 際 の イベ ント を 設定 する が 枯 電 : 信 0. 0: 二村 p./48 





IdVS 計 〇 NGGTW」H 本 に EE4 ミ ピ 
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Web Storage の 特定 の デー タ を 削除 する 








ここ で は 、 LocalStorage、 お よび 、 SessionStorage 内 に ある 特定 の デー タ を 削除 する 方 法 
に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq Charset="utf-8"> 
<t1 せ le>SqmpLe</ttt1e> 
<SCrtDt src="]S/sampte.]S"></scrtpt> 
</head> 
<body> 
<form> 
キー 名 :<input type="text" vgtue="prtce"><br> 
<tnput type="button" vaglue=" 該 当 す る キー と デー タ を 消去 "> 
</form> 
<OU て Du キモ ></Ou モ Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("1ogd" 。 functtonC){ 
var ele = document.getELementsByTagName( "output")[9]: 
Var tnput = document.getEtementsByTagName( "1nput"): 
// tnput ボ タン に イベ ント を 割り 当て 
tnput[1] .qddEventLtstener("clLick"。functton(){ 
// テキ スト フィ ー ル ド の キー を 読み 出す 
var tempKey = 1nput[9] .value: 
// キー と デー タ を 削除 
tocglStorage . removeTtem(tempKey): 
// メッ セー ジ を 出力 
ele.tnnerHTML = tempKey+" キ ー の デー タ を 消去 し まし た ": 
}, false): 
},。 faqlse): 


加古 回 I 回 紅 


ES 10 で は 、 ロー カル 上 で は ロー ー カ ルス トレ ー ジ を 利用 する こと が で きま せん 。 





IVS き SrNSGTN」 | EPR 
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ブラ ウザ で index.html を 表示 し 、 削除 する デー タ に 対応 する キー を 人 入力 し て ボタ ン を クリ ッ ク 
する と 、 ロー カル スト レー ジ の 該当 する キー の デー タ が 消去 され ます 。 


=mNimlNl 画 特定 の デー タ を 消去 する に は 「removeltem()」 メ ソ ッ ド を 使う 


スト レー ジ に 保存 きれ た 特定 の デー タ を 消去 する に は 、| removeltem () 」 メソッド 
を 使い ます 。「removeltem () 」 メソ ッ ド の パラ メー タ に は 削除 する キー を 指定 し ます 。 
「removeltem()」 は 、 対応 する キー が な い 場 合 で も エラ ー に は な り ま せん (処理 が 行 
われ ず 無 視 さ れる )。 

な お 、 プラ ウザ の デバ ッ グ ツー ル を 使っ て 、 ロー カル スト レー ジ に 保存 され た デー タ を 削 
除 す る こと も で きま す 。 


関連 項目 ょ ゅ 


@ VVeb Storage に デー タ を 設定 する iM な 人 人 8. な が ちせ せる 注い a す 4. な D./38 
人 Web Storage か ら デ ー タ を 読み 出す の 0 も は さも 15: が 和室 栓 9 か 3 D./40 
e Web Storage 内 の すべ て の キー と 値 を 取得 する … じ 〔 ゆ ie に omerrrrne p.742 
@ Veb Storage の すべ て の デー タ を 削除 する 0 導 和 e 56 ん 0 4 人 店 26 む 6 びる 溢 !4 ま ex.9 D./46 
e スト レー ジ 内 容 が 変更 され た 際 の イベ ント を 設定 する … ooo D.748 
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Web Storage の すべ て の デー タ を 削除 する 





ここ で は 、 LocalStorage、 お よび 、 SessionStorage 内 に ある すべ て の キー と デー タ を 削除 
する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<t1tle>Sqmpte</t1t1e> 
<SCPtDt Src="]s/sample .]S "></scrtDt> 
</head> 
<body> 
<button>LocgtStorgge 内 の デー タ を 全て 消去 する </button><br> 
<OutDu キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.gddEventLtstener("1ogd"。functton(){ 
// ボタ ン に イベ ント を 割り 当て 
var clearButton = document.getEtementsByTagName( "button")[@]: 
cteqrButton . aqddEventLtstener("clLtck"。 functton(){ 
// LocogtStoragge 内 の デー タ を 消去 
locqlStoragge .clegr(): 
// メッ セー ジ を 表示 
var ele = document .getELementsByTagName( "output")[9] : 
ete.innerHTML = "同じ オリ ジン の 全て の デー タ を 消去 し まし た ": 
}。fqtse): 
}, false): 


回 回 回 回 、 


IEdー10 で は 、 ロー カル 上 で は ロー カル スト レー ジ を 利用 する こと が で きま せん 。 


m ヒロ T| 口 NN - ヨ 15 mw Web Storage の すべ て の デー タ を 削除 する 


プラ ウザ で index.html を 表示 し 、 ボ タン を クリ ッ ク す る と 、 ロー カル スト レー ジ の 同じ オリ ジン の 
すべ て の デー タ が 消去 され ます 。 


sl ヨ mlN 画 全 デ ー タ を 消去 する に は 「clear()」 メソッド を 使う 


スト レー ジ に 保存 きれ た デー タ を 一 括 し て 消去 する に は 、| clear() 」 メ ノッ ド を 使い ます 。 
た だ し 、「clear() 」 メ ノッ ド で 消去 され る の は 、 同じ オリ ジン 内 の キー と デー タ だ け で す 。 半 
な る オリ ジン の デー タ が 消去 され る こと は あり ませ ん 。 また 、 同じ オリ ジン で も localStorage 
と sessionStorage は 別々 に 管理 され て いる た め 、「localStorage.clear() 」 と し て も 、 同じ オ 
リジン の sessionStorage の 内 容 は 消去 され ませ ん 。 





関連 項目 


eWeb Storage に デー タ を 設定 する Io p.738 
@ Wehb Storage か ら デ ー タ を 読み 出す が: の 季 まい 全 ら ので 6 を D.740 
eWeb Storage 内 の すべ て の キー と 値 を 取得 する 402 の 2 の CK みか か かる D.74 ら 
e Web Storage の 特定 の デー タ を 削除 する 信和 2PN ま が NCP ロー マツ Pr p.744 
e スト レー ジ 内 容 が 変更 され た 際 の イベ ント を 設定 する …… ぐ "room p.748 





IdVS 計 NGGTWTH 記 EEEK4E は 
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mo EtJIN- 選 名 


スト レー ジ 内 容 が 変更 され た 際 の イベ ント を 
設定 する 
ここ で は 、 スト レー ジ 内 容 が 変更 され た 際 の イベ ント を 設定 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttte>Sqmpte</t1t1e> 
<Scrtpt src="]s/sample.]S "></scrtpt> 

</head> 

<body> 
<button> 現 在 時 刻 を スト レー ジ に 保存 </button><br> 
く OUtDu キ ></OutDut> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow.aqddEventLtstener("1ogd", functton(){ 
var ele = document.getElementsByTagName( "output")[9]: 
var btn = document.getEtementsByTagName( "button")[9]: 
// input ボ タン に イベ ント を 割り 当て 
btn .qddEventLtstener("cltck"。 functton(){ 
// キー と デー タ を 削除 
localStorage . setItem("xDay", new Date()): 
}, fatse): 
// wtndow オ プ ジ ェ クト に storgge イ ベン ト を 割り 当て 
wtndow.qddEventListener( "storage", functtonCevt){ 
Var' tempKey = evt.key: 
ele.tnnerHTML = tempKey+" キ ー の デー タ が 更新 され まし た <br>": 
ele.1nnerHTML += evt.oldValue+"<br> ! <br>"+evt . newValue : 
}, faqlse): 
}, faqtse): 


mal 回 
IE9~10 で は 、 ロー カル 上 で は ロー ー カ ルス トレ ー ジ を 利用 する こと が で きま せん 。 


王 ピ TI 口内 - ヨ 16 mw スト レー ジ 内 容 が 変更 され た 際 の イベ ント を 設定 する 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 現在 の 時 刻 が ロー カル スト レー ジ に 
保存 され ます 。 この と き 、「 xDay」 と いう キー が 使わ れ ま す 。 





デー タ が 保存 され る と | storage」 イ ベン ト が 発生 し 、 変更 前 の デー タ と 変更 後 の デ ー タ も 表 
示さ れ ま す 。 


xDay キ ー の デー タ が 更新 され まし た 
Tue Mar 20 21-38-03 UTC+0900 2012 


! 
Tue Mar 20 21-38-16 UTC+0900 2012 





mml に lm 引 デー タ 保 存 時 の 処理 を 設定 する に は 「storage] イベ ント を 使う 


Web Storage に デー タ が 保存 され る と 、| storage」 イ ベン ト が 発生 し ます 。| storage」 
イベ ント が 発生 時 イベ ント ハン ドラ に 渡さ れる イベ ント オプ ジェ クト に は 、 次 の デー タ が 渡さ 
れ む ま す 。 












URL 













3。 EL 、 
スト レー ジ の 種類 


関連 項目 ょ ゅ 


e イベ ント ハン ドラ を 設定 する ……… バ ーー (に に ドド oemoeoeoeoeoemoeere p.396 
@ イベ ント リス ナー な を 設定 する も (に に に に に に ooooeonoeonoeoeninm D.398 
@ Web Storage に デー タ を 設定 する 時 で で や で YY て Y て CCCUKL て とい い と OCZ CLOCKMLYKY エ ささ トッ D./38 
e Web Storage か ら デ ー タ を 読み 出す で oo p.740 
@ Web Storage 内 の すべ て の キー と 値 を 取得 する の や を も あみ: 和 46 も で も 8: 清 G: で で が 誠 呈 あ WIND.A 47 Si D./4 ら 
eWeb Storage の 特定 の デー タ を 削除 する iiirrrrrrrrrme D.744 
eWeb Storage の すべ て の デー タ を 削除 する ………ーー ド iirrerrrrrn p.746 
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LChrome 1 Safari 5 | Firefox 4 1 Opera 11 





EE も LN- コ 1 グ 


ワー カー オブ ジェ クト を 生成 する 


ここ で は 、 ワー カー オプ ジェ クト を 生成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttle>Sampte</t1ttte> 
<SCFr1Dt src="]S/sample .]S"></scrtDt> 
</hegd> 
<body> 
< く OUtDut></OUtDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


window .qddEventListener("togd" , function(){ 





var ele = document.getEtementsByTagName( "output")[9] : 
// Web Workers が 使え る か 調べ る 
tf (!wtndow.Worker){ 
ele.tnnerHTML = "Web Workers は 使え ませ ん ": 
Peturn: 
} 
// ワー カー オプ ジェ クト を 作成 
var myWorker = new Worker("]s/gdd.]s"): 
// 結果 を 出力 
ele.tnnerHTML = "ワー カー を 作成 し まし た : "+myWorker: 
// ワー カー オブ ジェ クト を 破棄 
myWorker = null: 
+, false): 


加古 II 回 1 先 ET 
サン プル の 動作 を 確認 する 際 は 、 ネッ トワ ー ク 環境 (Web サ ー バ ー 上 ) で 確認 し て くだ さい 。 





ブラ ウザ で index.html を 表示 する と 、 ワー カー オブ ジェ クト が 生成 され ます 。 


IdV 計 NGG]WTH ココ エロ マロ ロ 


ワー カー を 作成 し まし た - [。bjsct Worker] 
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生 王 ビ ロ TI 口 N! - ヨ 1 ワ mw ワー カー オブ ジェ クト を 生成 する 


IE9 で は Web Workers は 利用 で き な い た め 、 次 の よう な メッ セー ジ が 表示 され ます 。 


Web Workers( は 使え ませ ん 





= 引 sl 店 ワー カー オブ ジェ クト を 作成 する に は 「new Worker)」 を 使う 


]avaScript は 基本 的 に 、 同時 に 複数 の 処理 を 行う こと が で きま せん 。 そこ で 、 並列 
に 処理 を 行う に は 、 Web Workers を 利用 し ます 。 ワー カー オブ ジェ クト を 生成 する に は 
[new Worker()」 を 使い 、 パラ メー タ に 実行 する スク リプ ト フ ァイル 名 を 指定 し ます 。 指 
定 さ れ た スク リプ ト は 、 すぐ に 実行 され ます 。 

た だ し 、 すぐ に 実行 され る と 困る 場合 が ほとん ど で す 。 そこ で 、 752 ペ ー ジ で 説明 する 
「postMessage () 」 を 使っ て ワー カー と 呼び 出し 側 で デー タ の や り 取 り を 行い ます 。 

ワー カー 側 の スク リプ ト に は 、 制約 が あり ます 。 | window]」 オ プ ジ ェ クト に は アク セス で 
き な い た め 、 ド キュ メン ト 操 作 は も ちろ ん 、 Web Storage な ど に も アク セス する こと は で きま 
せん 。 た だ し 、 File API は 利用 で きる の で 、 時 間 の か か る ファ イル 処理 を ワー カー 側 で 
行う こと は で きま す 。 

また 、 Android 4 で は Web Workers を 利用 する こと が で きま す が 、 それ 以前 の Android 





















ロ 

2 で は JavaScript 処 理 と UI 処理 は 別々 の スレ ッ ド で 処理 され ます 。 この た め 、 JavaScript で 2 

時 間 の か か る 処理 を 行っ て も 、 UI 操作 が まっ た く で き な く な っ て し まう こと は あり ませ ん 。 - 
4 ミ 

関連 項目 ょ ゅ コ 

e 非同期 処理 を 行う … 層 ……(…ー ド ドド ドド ドド に に に ooneneenenents Dp.292 に 

邊 ワー カー に デー タ を 渡す 件 :c お 才 吉 人 63 D./5 ど チ 

る ワー カー 側 で JavaScript フ ァイル を 読み 込む PP で と す と を すす くす て すす さと ャ て に まい に に に いし いし し D.754 の 

前 2 2404 れ 022002089. は 21228OkkcgKOYVb 人 5 p.756 記 

ア 

U 
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Opera 11 Android 4 


らら ヒロ T1 品 NN -31 白 
ワー カー に デー タ を 渡す 


ここ で は 、 ワー カー に デー タ を 渡す 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<rmetq Chorset="utf-8"> 
<t1tle>SqmplLe</tttle> 
<SCrtpt src="]Ss/sample.]S"></scrtpt> 
</head> 
<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("1ogd"。 function(){ 
var ele = document.getEtementsByTagName( "output")[ の ]: 
// Web Workers が 使え る か 調べ る 
tf† (!window.Worker){ 
ele.tnnerHTML = "Web Workers は 使え ませ ん ": 
Peturn: 
} 
// ワー カー オブ ジェ クト を 作成 
Vor myWorker = new Worker("]s/aqdd.]s"): 
// 先 に イベ ント ハン ドラ を 設定 
myWorker.onmessage = functton(evt){ 
ele.innerHTML = "合計 結果 : " + evt.dgta: 
} 
/ ワー カー に メッ セー ジ を 送信 
myWorker.postMessage({ start : 1, end: 19 }): 
+, false): 


JavaScript の コー ド / ワ ー カ ー 側 の コー ド (add.js) 


onmessqge = functton(evt){ 

Var StartVatue = evt.data . start: 

var endValue = evt.data . end: 

var total = の: 

for(var 1=startValue: 1<=endVatue: 1++){ 
total += 1: 

} 

postMessaqge(total ) : 


還 呈 ビ ヒロ TI 品 NN - ヨ 1 日 m ワー カー に デー タ を 渡す 


サン プル の 動作 を 確認 する 際 は 、 ネッ トワ ー ク 環境 (WebD サ ー バ ー 上 ) で 確認 し て くだ さい 、。 
ブラ ウザ で index.html を 表示 する と 、 Web Workers で 1 一 10 ま で の 数 値 を 合計 し た 結果 
が 返さ れ 、 ペー ジ 上 に 表示 され ます 。 





| 合計 結果 55 





mi ヨ = ョ IN 下 ワー カー と や り 取 りす る に は 「postMessage()」 メソッド を 使う 


ワー カー と デー タ の や り 取 り を 行う に は 、「postMessage () 」 メ ソ ッ ド を 使い ます 。「post 
Message() 」 メ ソ ッ ド は 、 ワー カー 呼び 出し 側 と ワー カー 側 の 両方 で 実装 され て いま す 。 
つま り 、 相互 に デー タ を や り 取 りす る こと が で きま す 。 

| postMessage () 」 メソ ノッ ド の パラ メー タ に は 、 TavaScript の オプ ジェ クト や 数 値 な 
ど を 指定 で きま す 。「postMessage () 」 メ ツノ ッ ド で デー タ が 渡さ れる と 、 渡さ きれ た 側 で 
は 「message」 イベ ント が 発生 し ます 。「onmessage」 に イベ ント ハン ドラ を 設定 し た り 、 
| addEventListener() 」 メ ソ ッ ド で イベ ント リス ナー と し て 登録 し た りす る こと も で きま す 。 

イベ ント ハン ドラ に は イベ ント オプ ジェ クト が 渡さ れ ま す 。 イベ ント オプ ジェ クト の | data」 プ 
ロ パ ティ に 、| postMessage ) 」 メ ソ ッ ド で 渡さ れ た デー タ が 人 人 っ て いま す 。 













関連 項目 


3 ワー カー オブ ジェ クト を 生成 する や すす すす で ザビ タ ザヤ すす びき アザ モア た も て いく 1 ーー D./50 
1 ワー カー 側 で JavaScriDt フ ァイル を 読み 込む で 衝 ば Ate も 客 2 タ 送 な すま: せ っ: 名 が を ef D./54 
ゃ ワー カー を 終了 する お 生ま 裕和 ち 光導) 才 党 1 は 表 和 和 0 必 が 生 は D./56 
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LChrome 』 Safari 5 」 Firefox 4 1 Opera 11 





ら 5 ヒロ 11 口 N- コ 19 


ワー カー 側 で JavaScript フ ァイル を 読み 込む 





ここ で は 、 ワー カー 側 で 複数 の TavaScript フ ァイル を 読み 込む 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<retq Charset="utf-8"> 
<tttle>SamplLe</tttte> 
<SCPtDt Src="]S/sampte.]S "></scrtpt> 
</head> 
<body> 
<OUtDu キ ></Ou モ Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. addEventLtstener("1ogd" 。 functton(){ 
var ele = document.getEtLementsByTagName("output")[9] : 
// Web Workers が 使え る か 調べ る 
1tf (!wtndow.Worker){ 
ele.innerHTML = "Web Workers は 使え ませ ん ": 
Peturn: 
} 
// ワー カー オブ ジェ クト を 作成 
var myWorker = new Worker("]s/matn.]S"): 
// 先 に イベ ント ハン ドラ を 設定 
myWorker .onmessage = functtonCevt){ 
ele.innerHTML = "1>199 ま で の 合計 : " + evt.dgto: 
} 
// ワー カー に メッ セー ジ を 送信 
myWorker .postMessage({ stgrt : 1, end: 199 }): 
+, false): 





JavaScript の コー ド / ワ ー カ ー 側 の コー ド (main.js) 


tmportScrtpts(" ./add.]s" ): 


IdV 庭 rNSGGT] 届 TH コ ヨ エ コマ ロコ 


onmessage = functton(evt)†{ 
var SstqrtValue = evt.data . start: 
var endValue = evt.data . end: 
var totqal = qddFunc(startValue, endVatue): 


postMessaqge(totg1 ) : 
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生 王 ビ ビビ TI ロ N - コ 19 mw ワー カー 側 で JavaScript フ ァイル を 読み 込む 


JavaScript の コー ド / ワ ー カ ー 側 の コー ド (add」js) 
functton qddFuncCstartVatue, endVatue)1+ 
var totgl = の: 
forCvar 1=stagrtValue: 1<=endVaLue: 1++)1 
total += 1: 


} 


return total 


} 


HIN エ acca ai 


サン ブル の 動作 を 確認 する 際 は 、 ネッ トワ ー ク 環境 (Web サ ー バ ー 上 ) で 確認 し て くだ さ 


ブラ ウザ で index.html を 表示 する と 、 ワー カー 側 で 合計 処理 を 行う 関数 が 書か れ た Tava 
Script フ ァイル が 読み 込ま れ 、 実行 し た 結果 が 表示 され ます 。 


1 ご 100 ま で の 合 計 5050 


ワー カー 側 で JavaScript フ ァイル を 読み 込む に は 
ei 「importScripts()」 メソ ッ ド を 使う 


ワー カー 側 で は 、「importScripts() 」 メ ノッ ド を 使う こと で 、 複数 の JavaScript フ ァイル 





ロ 
を 読み 込ま せる こと が で きま す 。 | importScripts() 」 は 、 パラ メー タ に 読み 込ま せる Tava る 
9 
Script フ ァイル の URL や パス を 指定 し ます 。 ファ イル パス の 場合 、|importScripts() 」 メ 
ソ ッ ド を 実行 し て いる ファ イル の ある 場所 が 基準 に な り ます 。 
また 、 読み 込ま せる TavaScript フ ァイル は ワー カー 側 で 実行 で きる も る の で な けれ ば いけ ー 
ませ ん 。 ファ イル は 指定 し た 順番 に 読み 込ま れ 、 即時 、 実行 ミ きれ て いき ます 。 の 
で 
の 
関連 項目 上 
PO ワー カー オブ ジェ クト を 生成 する IDRRT 生き ET D./50 * 
る ワー カー に デー タ を 渡す まき 時 PE リサ の の ジル サテ 員 の D./5g do 
た cy 1 や D.756 
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Opera 11 Android 4 


=1 コ FilmINEc レ 1m 
ワー カー を 終了 する 


ワー カー は 、 呼び 出し 側 で 終了 させ る 方 法 と ワー カー 側 で 終了 させ る 方 法 が あり ます 。 ここ 
で は 、 ワーカー を 終了 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttle>Sqmple</tttle> 
<SCrtPt src="]Ss/sqmple .]S"></sCrtpt> 
</head> 
<body> 
<form> 
<tnput type="button" value=" 通 常 終了 " 1d="endBtn"> 
<tnput type="button" vatue=" 強 制 終了 " 1d="ktttBtn"> 
</form> 
< く OUt て Du キモ ></OUt て DUut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oad" functton(){ 
Var ele = document.getElementsByTagNaqme( "output")[ の ] : 
// Web Workers が 使え る か 調べ る 
if (!window .Worker){ 
ele.tnnerHTML = "Web Workers は 使え ませ ん ": 
Peturn: 
} 
// ワー カー オプ ジェ クト を 作成 
var myWorker = new Worker("]s/add.]s"): 
// 先 に イベ ント ハン ドラ を 設定 
myWorker.onmessage = functtonCevt){ 
ele.tnnerHTML = evt.dqta: 
// ワー カー を 呼び 出す 
myWorker.postMessqge(1): 
} 
// 通常 終了 ボタ ン に イベ ント を 設定 
document . getEtementById("endBtn").qddEventLtstener("cttck"。 functton(){ 
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myWorker.postMessqge(fatse): 
}, false): 
// 強制 終了 ボタ ン に イベ ント を 設定 
document.getElLementByTd("kt1tBtn") .addEventListener("cLtck", functton(){ 
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// 強制 終了 トス 
myWorker .termtnate(): 
+, false): 
// ワー カー に メッ セー ジ を 送信 
myWorker .postMessqge(1): 
}, faqtse): 


JavaScript の コー ド / ワ ー カ ー 側 の コー ド (add.js) 


var total = 9: 
onmessage = functton(evt){ 
// 終了 コマ ンド か どう が 調べ る (fgtse を 終了 コマ ンド と し て いる ) 
tf (evt.data === false)+ 
postMessage( "正常 終了 。 合計 : "+tota1): 
// ワー カー の 処理 を 終了 
Close( ): 
+elset 
// 数 値 の 場合 は 計算 を 継続 
total += parseInt(evt . dato): 
postMessage(total ): 
} 
} 


回 男 加 回 
サン プル の 動作 を 確認 する 際 は 、 ネッ トワ ー ク 環境 (Web サ ー バ ー 上 ) で 確認 し て くだ さい 、。 








通常 終了 の ボタ ン を クリ ッ ク す る と 、 ワー カー の 処理 が 終了 し 、 メッ セー ジ と 合計 結果 が 表示 
され ます 。 


IdV 詩 GrNQGGdTWTH EEFTEM に 4 


正常 終了 。 合計 :19433 
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剖 制 終了 の ボタ ン を クリ ッ ク す る と 、 ワー カー 側 の 処理 が 強制 的 に 止ま り 、 数 値 の 加算 も 中 
断 さ れ ま す 。 


ワー カー を 終了 する に は 


明 議 議 語 請 詞 「terminate()」 メ ソ ッ ド や 「close()」 メ ソ ッ ド を 使う 


パッ ク グ ラン ド で 動作 し て いる ワー カー の 処理 を 停止 さす せる に は 、「terminate() 」 メ ソ ッ 
ド を 使い ます 。 | terminate() 」 は 、 動作 し て いる ワー カー を 強制 的 に 停止 させ ます 。 ま 
だ た 、 ワー カー 側 で 停止 させ る 場合 は 、| close () 」 メ ソ ッ ド を 使い ます 。 

ワー カー に は 、 処理 を 一 時 停止 さ サ せる メソ ッ ド は あり ませ ん 。 一 時 的 に 停止 させ る 場合 
は 、| postMessage () 」 メ ソ ッ ド を 使っ て 自前 で 実装 する 必要 が あり ます 。 





内 計 引 に 三 園 信 2 


と ワー カー オブ ジェ クト を 生成 する 当店 沖 代 を きる が で 半 当 当 が 松生 っ D./50 
3 ワー カー に デー タ を 渡す る 槍 間 本 生か: を きかせ きす お る な むす 衝 語る か 4 な 0 の まみ も いな も が 960 まし D./5 
ブー カー 側 で JavaScript フ ァイル を 読み 込む 2 D./54 





IdV 計 〇 NGGTW」H 放 E ま TE に 4 ミロ 
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LIE9 1 Chrome 』 Safari 5 | Firefox 4 1 Opera11 』 iOS4 」 Android 2 !WP 





=1 ゴ mllmlNBc レ と 
オフ ライ ン / オ ン ラ イン 状態 を 調べ る 


ここ で は 、 プラ ウザ の ネッ トワ ー ク へ の 接続 状態 が オフ ライ ン か オン ライ ン か を 調べ る 方 法 に 
つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>SqmpLe</tttle> 
<SCrtpt src="]S/Sample .]S"></SCr1D キ > 
</hegd> 
<body> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .addEventListener("1oad" 。 functton(){ 
var ele = document.getEtementsByTagName( "output")[9] : 
// オン ライ ン か オフ ライ ン か 調べ る 
var flag = navtgator .onLtne: 
// 結果 を 出力 
ele.tnnerHTML = "接続 状態 :"+ftgg: 
}, false): 


プラ ウザ で index.html を 表示 する と 、 接続 状態 が 表示 され ます 。 





mml 記 四 オン ライ ン か どう か 調べ る に は 「onLine] プロ パテ ィ を 使う 


IdVS 詩 SrNQGG]W 和 TH 記 に ま E に 4 


ブラ ウザ が ネッ トワ ー ク 回 線 に 接続 きれ て いる か どう か は 、|「navigator」 オ プ ジ ェ クト の 
「 onLine」 プ ロ パ ティ で 調べ る こと が で きま す 。|「 onLine」 プロ パテ ィ が | true」 な ら ネ ッ ト 
ワー ク に 接続 され て いて 、「false」 の 場合 は 接続 きれ て いな いこ と に な り ま す 。 

Firefox の 場合 は 物理 的 に ネッ トワ ー ク に 接続 され て いて も 、 フ ァイル メニ ュー か ら 「 オフ 
ライ ン 作 業 」 を 選択 する と 、| onLine」 プロパ ティ は | false」 を 返し ます 。 
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LChrome Safari 5 | Firefox 4 1 Opera11 】 iOS4 | Android2 」 


電 み LN 2 


アプ リケーション キャ ッシュ を 更新 する 








ここ で は 、 アプ リケーション キャ ッシュ を 更新 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html mantfest="money .qppcache "> 
<head> 
<meto charset="utf-8"> 
<tttle>Sqmpte</ttt1e> 
<Scrtpt src="]s/sqmple.]s"></scrtpt> 
</head> 
<body> 
<form> 
<tnput type="button" vglue=" キ ャ ッシュ 更新 チェ ッ ク " id="checkBtn"> 
<tnput type="button" vglue=" キ ャ ッシュ を 更新 する "id="swapBtn"> 
</form> 
<dtv><tmg Src="1mages/saqmpte.]pg' wtdth="169" hetght="99"></dtVv> 
< く OUtDut></OuUtDut> 
</body> 
</html> 


JavaSoript の コー ド (samples) 


wtndow .qddEventListener(C"togd",。 functtonC)f 

var ele = document.getEtementsByTagName("output")[9]: 

// 更新 チェ ッ ク ボ タン に イベ ント を 割り 当て 

document .getEtementByTd("checkBtn").qddEventListener( "click", functton(){ 
// キャ ッシュ 更新 
qpPpl1cottonCache . update( ): 
// 結果 を 出力 
ele.tnnerHTML = "状態 "+QqPPLtcattonCache . stqtus+ "<br> "・ 
// イベ ント ハン ドラ を 設定 
qpP LtcgttonCache .oncached = functton(){ ete.tnnerHTML += "キャ ッシュ 成功 <br>": 1 





ui 
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qppltcattonCache .onchecktng = function(){ ele.tnnerHTML += "チェ ッ ク 中 .. .<br>": } 
qppLtcottonCache .ondowntogdtng = function(){ ele.1tnnerHTML += "ダウ ン ロ ー ド 中 .. .<br>": + 
gppLtcationCache .onprogress = functton(){ ele.tnnerHTML += "キャ ッ シュ 更新 中 ...<br>": } 
qppltcattonCache .onupdgteready = functton(){ ele.tnnerHTML += "更新 準備 完了 <br>": + 
qppltcationCache .onerror = functton(){ ele.tnnerHTML += "エラ ー 発 生 <br>": } 

}, faqtse): 

// 更新 ボタ ン に イベ ント を 割り 当て 

document .getEtementById("swapBtn").aqddEventLtstenerC"click", functton(){ 
tf (qppltcationCache . stqtus == gpPLtcattonCache .UPDATEREADY){ 

// キャ ッシュ 更新 


qppLtcattonCache . swapCache( ) : 
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// 結果 を 出力 4 
ele.tnnerHTML = "キャ ッシュ を 更新 し まし た 。 3 秒 後 に リロ ー ド し ます '": 
// 3 秒 後 に リロ ー ド 
setTimeout( "1ocatton .reload()" 。 3*1900 ) : 
+else+ 
// 結果 を 出力 
ele.innerHTML = "キャ ッシュ を 更新 で きま せん で し た ": 


} 
+, false): 
}。 foqlse): 


= に = ま 中 過 = 十 本 mm』 六 アプ リケーション キャ ッ シ ジュ の コー ド (money.anDpcachG) 
CACHE MANIFEST 
#ver 1.06 


CACHE : 


tmages/Ssample.]p9g 


NETWORK: 
_ tndex .html 


]s/sqmple.]S 


ブラ ウザ で indexihtml を 表示 し 、| キャ ッシュ 更新 ナチ ェ ッ ク 」 ボ タン を クリ ッ ク す る と 、 マ ニ フ ェ ス 
ト フ ァイル が 更新 され て いる か 調べ て 、 結果 が 表示 され ます 。 キャ ッシュ が 更新 され て いな い 
場合 は 、 次 の 図 の よう に |「 チェ ッ ク 中 .…」 と 表示 され た まま に な り ま す 。 この 後 、 images/sample. 
jpg の 画像 を 入れ 装 え ます (同じ 名 前 の 別 の 画像 を サー バー に アッ プ す る )。 この 状態 で は 、 
money.aDDCaChe は ブラ ウザ の キャ ッシュ の 画像 を 使用 する よう に 書か れ て いる た め 、 ペー ジ 
を リロ ー ド し て も 画像 は 更新 され ませ ん 。 





そこ で 、 money.appcache の |#Ver 1.06」 を | #ver 1.07」 に 変更 し ます 。 その 後 、| キャ ッ 
シュ 更新 チェッ ク 」 ボ タン を チェ ッ ク し ます 。 マニ フェ スト ファ イル が 変更 され た 場合 は 、 次 の よう 
に 更新 準備 が 完 了 となり ま す 。 
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mW ビ ビビ TI ロ NN - ヨ ラフ 2 mm アプ リケーション キャ ッシュ を 更新 する 


キャ ッシュ 更新 中 
キャ ッシュ 更新 中 
更新 準備 完了 





更新 が 確認 され た ら 、| キャ ッシュ を 更新 する 」 ボ タン を クリ ッ ク し ます 。 クリ ッ ク す る と 、 3 秒 後 
に キャ ッシュ が 新しい も の に 更新 され 、 ペー ジ 上 の 画像 も 新しい も る の に 更新 され ます 。 


キャ ッシュ を 更新 し まし た 。 3 秒 後 に リロ ー ド し ます 





な お 、 古い iPhone OS 4) で は 一 度 キ ャ ッシュ し た 内 容 が 削除 きれ ず 、 マニ フェ スト ファ イル 
の 更新 が 反映 され な いこ と が あり ます 。 この 場合 、iPhone そ の も の を 完全 に 初期 化す れ ば 、 
キャ ッシュ を 削除 する こと が で きま す 。 


生 ビビ TI ロ N - ヨ 22 mw アプ リケーション キャ ッシュ を 更新 する 


アプ リケーション キャ ッシュ を 更新 する に は 
ml 「swapCache() 」 メソッド を 使う 


アプ リケーション キャ ッシュ を 更新 する に は 、| applicationCache」 オ プ ジ ェ クト の | swap 
Cache() 」 メ ソ ッ ド を 使い ます 。 た だ し 、 キャ ッシュ デー タ が ダウ ン ロ ー ド され て いな いと 更 
新 さ れ ま せん 。 キャ ッシュ が 更新 きれ て いる か 調べ て 必要 な デー タ を ダウ ン ロ ー ド する に 
は 、「applicationCache」 オブ ジェ クト の 「 update 0 」 メ ノッ ド を 使い ます 。「update)」 メ 
ソ ッ ド を 実行 する と 、 次 の 表 の よう な 各種 イベ ント が 発生 し ます 。 
<. 
ニニ フェ スト ファ イル が 不明 (キャ ッシュ は 削除 ) 
キャ ッシュ デー タ が ダウ ン ロ ー ド され た 場合 は 、|updateready] イベ ント が 発生 し ま 
す 。 この イベ ント が 発生 し た ら 、「swapCache( 」 メ ノッ ド を 使っ て デー タ を 更新 し ます 。 ま 
た 、 更新 可能 な 場合 は 、「applicationCache」 オブ ジェ クト の 「 status] プロ パテ ィ の 値 が 
「applicationCache.UPDATEREADY」 に な り ま す 。 | statuns] プロ パテ ィ を チェ ッ ク し た 
化 で 更新 する こと も で きま す 。 な お 、| statuns」 プ ロ パ ティ の 値 は 、 次 の 表 の よう に な り ま す 。 





に 本 “ 

| 0 | UNCACHED | キャ ッシュ され て いな い 1 
に Ti 細 間 
| 4 | UPDATEREADY ] 更新 完了 





OBSOLETE マニ フェ スト ファ イル が 不明 の た め キ ャ ッシュ 削除 
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LFirefox 10 」 LiOS4 1 Android2 


1 = 誠 還 軍 半量 に Em に ちと を に 
タッ チ 数 を 求め る 


こ で は 、 スマ ー ト フォ ン や タブ レッ ト で 同時 に デバ イス に タッ チ さ れ た 数 を 求め る 方 法 に つい 
て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<SCPtpt Src="]S/sample.]S"></scrtpt> 
</hegd> 
<body> 
<OutDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("touchstart"。 functtonCevt){ 
var ele = document.getElementsByTagNgme( "output")[9] : 
// タッ チ さ れ た 数 を 求め る 
var n = evt.touches . tength: 
// 結果 を 画面 に 出力 
ete.innerHTML = "同時 に タッ チ さ れ た 数 :"+n 

}。 false): 


回 回 | 回避 


この 機能 は 、 パソ コン で は な く 、 スマ ー ト フォ ン や タブ レッ ト が 対象 で す 。 





プラ ウザ で index.html を 表示 し 、 画 面 に タッ チ す る と 、 タ ッ チ し た 数 が 表示 され ます 。 同時 タッ 
チ で き な い デバ イス も あり 、 その 場合 は 常に 「1」 に な り ま す 。 


同時 に タッ チ さ れ た 数 : $ 


IdV 詩 GrNGG]W 和 TH EE まき EE4Sm 
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生 王 ピロ 丁 | 口 N - ヨ ンコ m タッ チ 数 を 求め る 


= ヨコ sj 同時 タッ チ 処 理 を 行う に は タッ チ 関 係 の イベ ント を 使う 


スマ ー ト フォ ン や タプ レット で は 、 複数 の 指 を 使っ て 操作 (ジェ スチ ャ ー) す る こと が で き 
ます 。 その 際 、 何 本 の 指 が タッ チ さ れ て いる か を 知り た い 場 合 が あり ます 。 タッ チ 処 理 は 、 
次 の 表 に 示す イベ ント が 発生 し ます 。 イ ベン ト が 発生 する と イベ ント ハン ドラ が 呼び 出さ れ 、 
イベ ント オプ ジェ クト が 渡さ れ ま す 。 この イベ ント オプ ジェ クト の 「touches」 配列 に タッ チ さ 
れ た 指 の 情報 が 入り ます 。「touches」 配列 な の で 、| length」 プロ パテ ィ を 参照 すれ ば 
同時 に タッ チ さ れ た 数 を 知る こと が で きま す 。 
タッ チ さ れ た ( 指 が 画面 に 触れ た ) 


タッ チ し た まま 指 を 動か し た 
タッ チ し 終わ っ た ( 指 が 離さ れ た ) 















miml 半 に 問 較 同時 タッ チ 数 の 制限 


iOS(GiPhone/iPad) で は 、 同時 に タッ チ で きる 数 は 5 つま で で す 。 Android の 場合 は 、 
Android OS 2x で は 1 つ 、 3.x 以 降 は 2 つ 以 上 、 同時 に タッ チ で きま す が 、 実際 に は いく < 
つま で 同時 タッ チ で きる か は 端末 に よっ て 異な る 場合 が あり ます 。 また 、 同時 タッ チ に 見 
せ か けた よう な 処理 が 行わ れる こと が ある た め 、 Android で は 、 同時 タッ チ し た 際 に 連 


続 的 に | touchstart」 イ ベン ト が 発生 する よう な 場合 も あり ます 。 1 カ所 の タッ チ 処 理 で あ 
れ ば 、iOS/Android な ど を 問わ ず に 処理 する こと が で きま す 。 

Windows Phone(7.5) の 場合 は | touch」 イ ベン ト が 発生 し な いた め 、 タッ チ 処 理 を 行う 
こと は で きま せん 。 また 、 Safari や Google Chrome で 使用 きれ て いる レン ダリ ング エン ジン 
で ある WebKit を 利用 し た 端末 (Kobo Touch な ど ) で も 、 タッ チイ ベン ト は 発生 し ませ ん 。 





関連 項目 


e タッ チ さ れ た 座標 を 求め る …… バ ーー に ドド ドド ドド ピー ドー D.766 
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LiOS4 」 Android2 


BE ビビ 11 品 N- コ ジイ 


タッ チ さ れ た 座標 を 求め る 








ここ で は 、 スマ ー ト フォ ン や タブ レッ ト で タッ チ し た 座標 値 を 求め る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<t1tle>SqmpLe</t1t1e> 
<SCrtDt Src="]S/Sample . ]S "></scrtpt> 
</heqd> 
<body> 
<OUt て Du キモ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . oddEventLtstener("touchstart"。 functtonCevt){ 





Var ele = document.getEtementsByTagName( "output")[9] : 

// 最初 に タッ チ さ れ た 位置 だ け 座標 値 を 表示 する 

// クラ イア ント 要素 上 で の XY 座標 

ele.tnnerHTML = "cltentX : " + evt.touches[9] . ctientX: 
ele.tnnerHTML += "<br>clientY : " + evt.touches[9] . cLtentY: 
// ペー ジ 上 で の XY 座標 


ele.1nnerHTML += "<br>pageX : 


+ evt.touches[9] .pageX: 
ele.tnnerHTML += "<br>pageY : " + evt.touches[9] .pageY: 
// 画面 (スク リー ン ) 上 で の XY 座標 
ele.tnnerHTML += "<br>screenX : " + evt.touches[9] . screenX: 
ele.1nnerHTML += "<br>screenY : " + evt.touches[9] . screenY: 
+, false): 


同年 司 ee 
この 機能 よ 、 パソコン で は な く 、 スマ ー ト フォ ン や タブ レッ ト が 対象 で す 。 





ブラ ウザ で index.html を 表示 し 、 画面 に タッ チ す る と 、 タッ チ し た 座標 が 表示 され ます 。 


IdV 計 9NGG ]WTH コ ヨ ュ ロッ ロロ 


clientX : 121 
clientY : 363 
DageX : 121 
DageY : 363 


ScreenX : 11$ 
ScreenY : 344 
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mW 王 ビ ロイ T エ | ロト | - コ 2 4 mw タッ チ さ れ た 座標 を 求め る 


タッチ され た 座標 を 調べ る に は 
「clientX」 「clientY」 「pageX」 「pageY」 「screenX」 「screenY」 を 使う 
スマ ー ト フォ ン や タブ レッ ト で タッ チ さ れ た 座標 値 を 求め る に は 、| touches」 配 列 に 格納 
され て いる オブ ジェ クト の 各 プ ロ パ ティ を 読み 出し ます 。 読み 出せ る プロ パテ ィ は 、 次 の 表 
の よう に な り ま す 。 上 座標 値 と し て は 、| clientX」| clientY」|pageX」lpageY」|screenX」 
「screenY 」 の 6 つの プロ パテ ィ が あり ます 。 


ID (IOS と Android で は ID の 処理 が 異な る ) 





関連 項目 ょ ゅ 
ゅ ぁ ダッチ 迷 導 求め る … ド ーーー……… ツ 3 K92KU4RRetNoPt2Ceetmerktttynetrtftd い て 旨 RTR) D.764 





IdV お 詩 〇 NGGT]W1H 記 に EE4se 


ky 11 コン 


加速 度 セ ン サ ー の 値 を 求め る 








ここ で は 、 ス マー ト フ ォ ン や タプ レッ ト で 加速 度 セ ン サ ー の 値 を 求め る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta Charset="utf-8"> 
<tttle>SaqmpLe</t1t て te> 
<SCr1Dt Src="]S/sqmple .]S"></sCrtDpt> 
</heqd> 
<body> 
<OU モ Du キモ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . qddEventLtstener("devtcemotiton"。 functtonCevt){ 





var ele = document .getEtementsByTagName( "output")[9] : 
// 加速 度 セ ン サ ー の 値 

var X = evt.qcceleratton .X: 

var y = evt.qcceleratton.yY: 

var Z = evt.qcceleratton.Z: 

// 重力 加速 度 セ ン サ ー の 値 (iPad/iPhone 4 以降 ) 

var xg = evt.qccelerattonInclLudtngGrav1ty .X: 


var yg = evt.qccelerattonIncludtngGrav1ty .y: 





var Zg = evt.qccelerattonIncludtngGravtty.Zz: 


// 結果 を 画面 に 出力 

ele.innerHTML = " 圏 加速 度 <br>": 
ele.1tnnerHTML += "Xi "+X+"<br>") 
ele.tnnerHTML += "y : "+y+"<br>": 
ele.tnnerHTML +=ー"z : +Z+"<br>『: 
elte.tnnerHTML += " 較 重 力 加速 度 <br>": 
ele.1tnnerHTML += "x : "+xg+"<Dr>"・ 
ele.tnnerHTML += "y : "+yg+"<br>": 
ele.tnnerHTML += "z : "+zg+"<br>": 


+, faqlse): 


ldvVS き SrtSGTn」 | 生 昌 Re 
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m 己 ビ ビ ビ TI ロ N- コ 25m 加速 度 セ ン サ ー の 値 を 求め る 


ブラ ウザ で index.html を 表示 し 、 デバ イス を 傾け る と 、 それ ぞ れ の 加速 度 の 値 が 表示 され 
ます 。 な お 、iOS4 で も iPad、 お よび 、iPhone 4 以降 で な いと 重力 加速 度 に 関し て は 動作 し ま 
せん 。 


画 速 度 

x : 0.22242858960647136 
y : -0.13410250976923851 
z : 0.174S3880231599474 
和 征 力 加速 度 

Xx : 0.8556278548309579 


y : -7.9753847494596615 
Z : -5.680692369798291 





mml ド lm 下 加速 度 セ ン サ ー を 扱う に は 「devicemotion]」 イ ベン ト を 使う 


スマ ー ト フォ ン や タブ レッ ト に は 、 加速 度 セ モン サ ー や 傾き セン サー な ど が あり ます 。 加速 度 
セン サー の 値 を 調べ る に は 、「devicemotion」 イ ベン ト を 利用 し ます 。「 devicemotion」 イ 
ベン ト は 、 加速 度 セ モン サー の 値 が 変化 する と 発生 し ます 。「devicemotion」 イ ベン ト が 発 
生 し た 際 に 呼び 出す イベ ント ハン ドラ に は 、 イベ ント オプ ジェ クト が 渡さ れ ま す 。 この イベ ント 
オプ ジェ クト の 「acceleration」 オ ブ ジ ェクト に 、 加速 度 の 値 が 入っ て いま す 。 加速 度 の 値 
は それ ぞ れ 方 向 に 応じ て 、|x」 プ ロ パ ティ 、| y]」 プ ロ パ ティ 、| zZ」 プ ロ パ ティ に 格納 され て い 
ます 。 















また 、 重力 加速 度 の 場合 は 、| accelerationIncludingGravity」 オ ブ ジ ェクト の | x」 プ 
ロ パ ティ 、「y」 プ ロ パ ティ 、「z」 プ ロ パ ティ に 格納 さん て いま す 。 


人 
accelerationIncludingGravity.x X 方 向 



















accelerationIncludingGravity.y 
accelerationIncludingGravity.Z 





関連 項目 b 


@ の や イロ セン サー の 値 を 求め る 導 ll…( ド ドド ドド ター p.770 
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LJ 





Android 4 





ーー] = 電 末 億 着 En に と すこ 
ジャ イロ セン サー の 値 を 求め る 


ここ で は 、 ス マー ト フ ォ ン や タブ レッ ト で ジャ イロ セン サー の 値 を 求め る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<rmeta charset="utf-8"> 
<tttle>Sqmple</tttte> 
<SCrtDpt Src="]S/sqmple .]S"></sCrtDt> 
</heqad> 
<body> 
<OUt て Du キモ ></OutDu キ > 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow . oddEventLtstener("devtceortentatton" ,。 functionCevt){ 
var ele = document.getElLementsByTaqgName( "output")[9] : 
// ジャ イロ セン サー の 値 
var q = evt.qglpha: 
var b = evt.betg: 
Var 9 = evt.gommg: 
// 結果 を 画面 に 出力 
ele.innerHTML = " 圏 ジ ャ イロ セン サー<br>": 
ele.tnnerHTML += "alpha : "+o+"<br>": 
ele.tnnerHTML += "betg : "+b+"<br>": 
ele.tnnerHTML += "gamma : "+g+"<br>": 
}, fgqlse): 





ブラ ウザ で index.html を 表示 し 、 デバ イス を 傾け る と 、 それ ぞ れ の 方 向 の 傾き が 角度 で 表 
示さ れ ま す 。 


一 ジャ イロ セン サー 

alpha : 67.1950415590376 
beta : 7.063625399049923 
gamma : 2.5990380971252383 


IdvS き SS 1 Ts 
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き 戸 選 ロイ | 口 N| - ヨ 2 6 mw ジャ イロ セン サー の 値 を 求め る 


mN 呈 引 ョ ml 中 ジャ イロ セン サー を 扱う に は 「deviceorientation」 イベント を 使う 


スマ ー ト フォ ン や タプ レッ ト に は 、 ジ ャ イロ セン サー が 装備 され て いる 機種 が あり ます 。 ジ ャ 
イロ セン サー の 値 を 調べ る に は 、|「deviceorientation」 イ ベン ト を 利用 し ます 。「device 
orientation」 イベ ント は 、 ジャ イロ セン サー の 値 が 変化 する と 発生 し ます 。「device 
orientation」 イ ベン ト が 発生 し た 際 に 呼び 出す イベ ント ハン ドラ に は 、 イベ ント オプ ジェ 
クト が 渡さ れ ま す 。 この イベ ント オプ ジェ クト の 「alpha] プロ パテ ィ 、「 beta」 プロ パテ ィ 、 
「 gamma」 プ ロ パ ティ に 、 次 の 表 の よう に 、 それ ぞ れ の 軸 の 傾き が 入っ て いま す 。 値 は 
傾き の 角度 (ラジ アン で は な い ) が 人 入っ て いま す 。 


図 で 表す と 、 次 の よう に な り ま す 。 






関連 項目 ゅ 


e 加速 度 セ ン サ ー の 値 を 求め る …… ド im D.768 
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9 も すし いい -ー コ る ソ 


ジェ スチ ャ ー さ れ た ら 拡 大 や 回 転 処理 を 行う 





ここ で は 、iOSGPhone/iPad) で ジェ スチ ャ ー さ れ た ら 拡 大 や 回 転 処理 を 行う 方 法 に つい 
て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<etq Charset="utf-8"> 
<meta name="VteWPort" content= "1ntttoal-scolte=1。 user-scaloble=no"> 
<tttle>SqmpLe</ttt1le> 
<SCP1Dt src="]S/Sqmpte.]S"></SCrtDt> 
</head> 
<body> 
<1tmg SFPc="1mages/sampte.]pg′ wtdth="249" hetght="249"> 
<hr> 
<OU て DU キモ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 

// 画像 の サイ ズ ( こ こ で は 249 ピ クセ ル 固 定 ) 

var g = { wtdth : 249, hetght : 249 +: 

// ジェ スチ ャ ー イ ベン ト が 発生 し て いる と き の 処 理 

wtndow . gddEventLtstener("gesturechange" , functton(evt){ 
var ele = document .getElLementsByTagName( "output")[9] : 
var photo = document.getElementsByTagName( "1mg")[9] : 
// スケ ー ル (拡大 縮小 ) の 値 
var S = evt.scale: 
// 回 転 角度 
Var 「 = evt.rotatton: 
// 画像 を 拡大 縮小 
photo.style.wtdth = g.wtdth * s+ "PX": 





photo.style.hetght = g.hetght * s+ "px": 
// 画像 を 回 転 
photo . style .webkttTransform = "rotate("+P+ "deg)": 
// 結果 を 画面 に 出力 
ete.tnnerHTML = "スケ ー ル : "+s: 
ele.innerHTML += "<br> 回 転 角 度 :"+r: 
}, false): 


IdVS き SSg1n」H 還 EZ 
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還 ヒロ T| ロト N!| - ヨ フワ 生 ジェ スチ ャ ー さ れ た ら 拡 大 や 回 転 処理 を 行う 


ブラ ウザ で index.html を 表示 し 、 画 面 上 で ジェ スチ ャ ー(2 本 指 で 操作 ) す る と 、 画 像 が ジェ 
スチ ャ ー 状 況 に 合わ せ て 回 転 し た り サ イズ が 変わ り ま す 。 また 、 どの < らい 回 転 し た か 、 拡大 ・ 
縮小 し た か が 数 値 で 表示 され ます 。 





スケ ー ル : 1112259864807129 
回 転 角度 : -15.349418640136719 


ジェ スチ ャ ー に よる 回 転 と 拡大 ・ 縮 小 を 行う に は 
AA 「gesturechange」 イ ベン ト な ど を 使う 


iOS で は 、 複 数 の 指 で 画面 を タッ チ し た 場合 に 、| touchstart」 | touchmove」| touchend」 


と は 別に 、 次 の 表 に 示す ジェ スチ ャ ー イ ベン ト が 発生 し ます 。 


ジェ スチ ャ ー イ ベン ト が 発生 し た 際 に 呼び 出さ れる イベ ント ハン ドラ に は 、 イベ ント オブ ジェ 
クト が 渡さ きれ ます 。 この イベ ント オプ ジェ クト の 「scale」 プロ パテ ィ に 、 どの くら い 指 が 離さ 
れ た か 、 つま り 、 拡大 ・ 縮 小 率 が 入り ます 。 また 、 指 で 回 す よ うな 操作 を する 、 つま り 、 回 
転 さ せ た 場合 に は 、 回 転 角 度 が イベ ント オプ ジェ クト の rotation」 プロ パテ ィ に 人 入り ます 。 
「 rotation」 プロパ ティ に 入る の は 角度 の 値 で あり 、 ラジ アン で は あり ませ ん 。 

画像 の 元 の 横幅 と 縦 幅 に 「scale」 プロ パテ ィ の 値 を 乗算 し 、 スタ イル シー ト の 「width」 
プロ パテ ィ 、「height」 プ ロ パ ティ に 設定 すれ ば 、 ジェ スチ ャ ー に よっ て 画像 を 拡大 ・ 縮 小 
する こと が で きま す 。 

同様 に 、「rotation]」 プ ロ パ ティ に よっ て 得 ら れ た 回 転 角度 を スタ イル シー ト の | webkit 
Transform」 プ ロ パ ティ に 設定 すれ ば 、 画像 を 回 転 き す せる こと が で きま す 。 





IdHVS 詩 NGGTW 和 TH 記 に EE に 4 ミ 





関連 項目 ゅ 
@ イベ ント / \ い ンド ラ を 設定 する Ke 人 (の は 近作 な 0 人 導き D.396 
@ イベ ント リス ナー を 設定 する 人 6 村人 も し リ そ プ す D.398 
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LFirefox 10 LiOS4 』 Android2 」 


=1 ゴ mMIINEc レ = 
テバ イス が 回 転 し た ら 処 理 を 行う 


ここ で は 、 デバ イス が 回 転 し た ら 処理 を 行う 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq Charset="utf-8"> 
<tttte>Sqmple</ttt1le> 
<SCrtDt src="]S/sample . ]S "></SsCrtDpt> 
</head> 
<body> 
<OUDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("ortentgttonchange", functtonCevt){ 
var ele = document.getELementsByTagName( "output ")[9] : 
// 回 転 角度 を 求め る 
var deg = wtndow.ortentatton : 
// 結果 を 画面 に 出力 
ele.innerHTML = "回 転 角度 :"+deg: 
}, faqlse): 


ml 回 I 回 


この 機能 は 、 パソ コン で は な く 、 スマ ー ト フォ ン や タブ レッ ト が 対象 で す 。 





プラ ウザ で index.html を 表示 し 、 デバ イス を 回 転 す る と 、 回 転 方 向 を 示す 角度 が 表示 され 
ます 。 





賠 http://www WW .openspc2.org/ 
回 転 角 度 : -90 


IdHV お 計 NGGT]W 和 TH EE に II:4 ミ | 
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生 王 ロ T| 口 N- ヨ 2 日 m デバ イス が 回 転 し た ら 処 理 を 行う 


デバ イス の 回 転 時 に 処理 を 行う に は 


ye 「orientationchange」 イベント を 使う 


スマ ー ト フォ ン で は デバ イス を 回 転 き させ た 際 、| orientatonchange」 イ ベン ト が 発生 し ます 。 
「orientationchange」 イ ベン ト が 発生 し た 際 、 デバ イス が 縦 向き か 横向 きか を 知り た い 場 
合 は 、「window 」 オ ブ ジ ェクト の 「orientation」 プ ロ パ ティ の 値 を 参照 し ます 。 この 値 は 次 の 
表 に 示す 4 種類 を 返し ます 。 な お 、iPad で は | 180」 の 値 が 返さ れ ま す が 、iPhone で は 180 
度 回 転 し て も 対応 し て いな いた め 、「180」 の 値 が 返さ れる こと は あり ませ ん 。 デバ イス の 向き 


を 知り た い 場 合 に は 、 ジャ イロ セン サー の 値 を 読み 出す 必要 が あり ます 。 


| 0O | 縦 向 
| 90 | 右 に 回 転 
| -90 | に 回 転 





内 放 事 三箇 2 」 
e イベ ント / い ン ドラ を 設定 する が 14 ギド り を サヤ ザイ で せい ー ト す で と て セイ オジ ルト で イイ D.396 
@ イベ ント リス ナー な を 設定 する きす 0 きた た だ で て サイ 1 プイ も す ツ て ト タチ で の やす D.398 





ldVS 詩 NGG]W」H EE に ま TE4 ミ me 


775 











L 


ldVS き SrNSGTW1H に に 上 こ ya 


+> 


776 


=1 ゴ milmINEc レ に 
日 付 の 入力 を 行う よう に する 


ここ で は 、 日 付 の 入力 を 行う よう に する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttle>Sqmplte</tttle> 
<SCrtpt src="]s/sample .]s"></scrtpt> 
</head> 
<body> 
<form> 
nput type-"dote' id-"myDoter><brp> [ 
<tnput type="button" 1d="check" value=" チ ェ ッ ク "> 
</for> 








JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oad" functton(){ 
var ele = document.getElementsByTagName( "output")[9] : 
// ボタ ン 要 素 の 読み 出し 
vgr btn = document.getEtementByTd("check"): 
// ボタ ン に イベ ント を 割り 当て 
btn .qddEventListener("cltck"。 functtonCevt){ 
// 入力 され た 日 付 を 取得 
var text = document.getEtLementById( "myDate") .vatue: 
var dtext = document.getEtementById("myDate") .vqatueAsDate: : 
// 結果 を 出力 
ete.tnnerHTML = "vaqlue:"+text+"<br>": 
ele.innerHTML += "vatueAsDote:"+dtext: 
}。 fgqlse): 
}, false): 


m 司 ビ ピロ TI ロ N- コ 29 ョ m 日 付 の 入力 を 行う よう に する 


プラ ウザ で index.html を 表示 し 、 フィ ー ル ド を クリ ッ ク す る と 、 日 付 を 選択 する カレ ンダ ー な ど 
が 表示 され ます 。 


value : 2015-02-15 
valueAsDate : Sun Feb 15 2015 09:00:00 GMT+0900 (JST 


mml に l 画 日 付 を 選択 する に は 「input」 要素 の 「type」 属 性 に 「date」 を 指定 する 


日 付 を 選択 する に は 、「input」 要素 の 「type」 属 性 に 「date」 を 指定 し ます 。| date」 
を 指定 し た フィ ー ル ド を クリ ッ ク す る と 、 カレ ンダ ー、 また は 、 スピ ン ボ タン に よる 日 付 選 択 な 
ど が 可能 に な り ま す 。 どの よう な 選択 画面 に な る か は 、 プラ ウザ に よっ て 異な り ま す 。 

選択 され た 日 付 を 読み 出す に は 、「value」 プロ パテ ィ に アク セス し ます 。 日 付 文字 列 と 
し て 取得 し た い 場 合 に は 、| valuneAsDate」 プ ロ パ ティ に アク セス し ます 。 


関連 項目 
】 内 容 を Date 型 / 数 値 型 と し て 読み 出す aw ど を 価 す 9 倍 おす と 生涯 押 六 を な すす 年 す で し な 06 89 あの な みあ D.327 
で 日 時 の 入力 を 行う よう つ に する 本 ササ ザビ リ せ うな ので て 2 すい て て て テル まま くく スッパ メイ と て を りさ YY D.// 
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=1 コ ilmINEc に im 
日 時 の 入力 を 行う よう に する 


ここ で は 、 日 時 の 人 入力 を 行う よう に する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<ScrtPt Src="]Ss/saqmple.]S"></scrtpt> 
</head> 
<body> 
<form> 
<tnput type="datetime" 1d="myDate"><br> 
<tnput type="button" 1d="check" vatue=" チ ェ ッ クリ"> 
</foOrr> 
<OuUtDu キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . gddEventLtstener("1ogd", functton(){ 
var ele = document.getEtementsByTagName( "output")[9] : 
// ボタ ン 要 素 の 読み 出し 
var btn = document.getElementById( "check"): 
// ボタ ン に イベ ント を 割り 当て 
btn . gddEventLtstener("clLick" function(evt)# 
// 入力 され た 日 時 を 取得 
var text = document.getEtementBy1Id( "myDgte").vatlue: 
Var dtext = document.getEtementBy1dC "myDate").vqatueAsDate: : 
// 結果 を 出力 
ele.tnnerHTML = "vaqlue:"+text+"<br>"・ 
ele.tnnerHTML += "vaqlueAsDate : "+dtext・ 
}, faqltse): 
}, false): 


mm 呈 ビ ピ T エ | ロト N- コ コロ mW 日 時 の 入力 を 行う よう に する 


プラ ウザ で index.html を 表示 し 、 フィ ー ル ド を クリ ッ ク す る と 、 日 時 を 選択 する カレ ンダ ー な ど 
が 表示 され ます 。 


ーー 

て 胡 る ノ 

value : 2013-02-1 3TO8:06.04Z 

valaneAsDate : Fri Feb 13 2011 17:06.04 GMT+0900 (JST) 


ロロ NEPO ロ INT 


日 付 と 時 間 を まとめ て 選択 する に は 、|「input」 要素 の 「 type」 属 性 に | datetime」 を 指 
定 し ます 。「datetime」 を 指定 し た フィ ー ル ド を クリ ッ ク す る と 、 カレ ンダ ー、 また は 、 スピ ン 
ボタ ン に よる 日 付 選 択 な ど が 可能 に な り ま す 。 どの よう な 選択 画面 に な る か は 、 プラ ウザ に 
よっ て 異な り ま す 。 

選択 され た 日 付 を 読み 出す に は 、「value」 プ ロ パ ティ に アク セス し ます 。 日 付 文字 列 と 
し て 取得 し た い 場 合 に は 、「valueAsDate」 プ ロ パ ティ に アク セス し ます 。 





関連 項目 
1 内 容 を Date 型 / 数 値 型 と し て 読み 出す 作れ 電 も 時 油 SI な が D.327 ア 
『) 日 付 の 入力 を 行う よう に する 9 が 人 は 8 そい キテ す を で で サキ テン トマ イイ イン スナ イス い いて D.776 
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LOpera 11 | iOS4 1 Android2 」 


1 LN- き | 


メー ル や URL、 電話 番号 を 入力 する 
専用 フィ ー ル ド に する 


ここ で は 、 メ ー ル や URL、 電話 番号 を 入力 する 専用 フィ ー ル ド に する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<hegd> 
<meto charset="utf-8"> 
<tttle>Sqmple</tttte> 
<SCrtPt Src="]S/saqmple .]s "></scrtpt> 
</hegd> 
<body> 
<form> 
<p> メ ー ル アド レス :<input type="ematl" 1d="adrs"></p> 
<p> ウェ ブサ イト :<input type="ur1" 1d="website"></p> 
<p> 連 絡 先 電話 番号 :<1input type="tel" 1d="tetephone"></P> 
<tnPut type="button" 1d="check" vaqtue=" 確 認 "> 
<tnput type="submtt" 1d="check" vgtue=" 送 信 "> 
</formW> 
< く OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventListener("1ogd", function(){ 





var ele = document.getElementsByTagName( "output")[9] : 
// ボタ ン 要 素 の 読み 出し 
Var btn = document.getElementById("check"): 
// ボタ ン に イベ ント を 割り 当て 
btn .qddEventLtstener("click", functtonCevt){ 
// 入力 され た メー ル ア ド レス を 取得 
Var userMatl = document.getELementById( "adrs").value : 
// 入力 され た URL を 取得 
Var userStte = document.getElementByTd( "webstte") .value: 
// 入力 され た 電話 番号 を 取得 
var userTel = document.getEtementById("telephone") .vqlue: 
// 結果 を 出力 


etle.tnnerHTML = "メー ル :"+userMagt1+"<br>": 





IdvS き SNSg1n」H RE 


ete.innerHTML += "ウェ ブ :"+userSite+"<br>": 
ele.innerHTML += "電話 番号 :"+userTet : 
}, fgqlse): 
}, faqtse): 
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mW ヒビ ロ T エ | 口 N!-3 コ 3 1 m メー ル や URL、 電話 番号 を 入力 する 専用 フィ ー ル ド に する 


ブラ ウザ で index.html を 表示 し 、 フィ ー ル ド に 文字 を 入力 し て [確認] クリ ッ ク す る と 、 入力 
内 容 が 表示 され ます 。 


メー ルプ ドレ ス : argedacem  」 


ブサ イ : 較 m ーーー 


連絡 先 電話 番号 : |03-1234-abcd 


メー 時 0 ole#c rcom 


ェ ブ ノブ :abc.com 
電話 番号 :03-1234-abcd 





「 送信 」 ボ タン を クリ ッ ク す る と 、 チェ ッ ク が 行わ れ 、 正しく な い 項 色色 に は 再 人 力 を 促す メッ セー 
ジ が 表示 され ます 。 


⑯) Sample 
を っ で Ge 





メー ル ア ドレ ス : argeaercel メー ル ア ド レス: eeeezcsm  ] 
ウェ ブサ イト : 回 メー ル アド レス を 入力 し て く ウェ ブサ イト : 


だ さい 。 5 る の す 3 
の 連絡 先 電話 番 * 華 URL を 入力 し て くだ さい 、。 | 


ー ル sample#crcom メー ル : sample#crcom 
ウェブ :abc.com ウェ ブ :abccom 
電話 番号 :03-1234-abcd 電話 番号 :03-1234-abcd 


「input」 要素 の 「type」 属 性 に 「email」 や 「url」 を 指定 する 
メー ル ア ド レス の 入力 専用 フォ ー ル ド に する に は 、「input」 要 素 の 「type」 属 性 に 「email」 
を 指定 し ます 。「email」 を 指定 する と 、|「 xxxx@xxx.xxx」 と いっ た だ メール ア ドレ ス と し て 認 
識 で きる 形式 以外 は 不正 と みな され 、 デー タ が 送信 で き な く な り ま す 。 入力 し た メー ル ア ド 
レス が 不正 な 場合 は 、 送信 時 に ブラ ウザ が メッ セー ジ を 表示 し ます (プロ グラ ム に よっ て も 
チェ ッ ク す る こと が で きる ) 。 
同様 に 、 URL 入力 専用 に する 場合 は 、「type」 属 性 に |「url」 を 指定 し ます 。 電話 番号 
の 場合 は 「type」 属 性 に 「tel」 を 指定 し ます 。 電話 番号 の 場合 は 、 スマートフォン で は 電 
話 番号 入力 専用 の ソフ トウ ェ ア キ ー ボ ー ド が 表示 され ます 。 な お 、 電話 番号 形式 の 整合 
性 は チェ ッ ク さ れ ま せん 。 
また 、 検索 キー ワー ド を 示す フィ ー ル ド に する 場合 は 、| type」 属 性 に | search」 を 指定 
し ます 。 
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LOpera 11 1 iOS4 | Android2 」 


et LIN- コ 5 


副 條 人 力 ・ ス ライ ダー 入力 の 
専用 フィ ー ル ド に する 


ここ で は 、 数 値 人 力 ・ ス ライ ダー( 範 囲 指 定 ) 入力 の 専用 フィ ー ル ド に する 方 法 に つい て 解 
説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttle>SampLe</t1tle> 
<SCrtDt src="]S/sample .]S "></SCrtDt> 
</head> 
<body> 
<formm> 
<p> 注 文 番号 :<tnput type="number" value="596" 1d="orderNo"></p> 
<p> 注 文 個 数 :<tnput type="range" value="5" min="1" max="19" 1d="count"></p> 
<tnput type="button" 1d="check" value=" 確 認 "> 
</form> 
<OUt て Dut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("toad" 。 functton(){ 
Var ele = document.getElLementsByTagName( "output")[9] : 
// ボタ ン 要 素 の 読み 出し 
vor btn = document.getElementById( "check"): 
// ボタ ン に イベ ント を 割り 当て 
btn .qddEventLtstener("cltck",。 functton(evt){ 
// 入力 され た 番号 を 取得 
Vor no1 = document.getElementByIdC("orderNo") .vatue: 
Var noZ = document.getEltementByTd("orderNo") .vqtueAsNumber: 
// 入力 され た 個数 を 取得 
Var cnt1 = document.getELementBy1d("count") .vatue: 
Var cntZ = document .getElementByTId("count") .vatueAsNumber: 
// 結果 を 出力 
ele.tnnerHTML = "注文 番号 Cvalue):"+no1+"<br>": 
ete.tnnerHTML += "注文 番号 CvqtueAsNumber): "+no2+"<br>": 
ele.tnnerHTML += "注文 個数 (value):"+cnt1+"<br>": 
ele.tnnerHTML += "注文 個数 (vatueAsNumber):"+cnt2+"<br>": 
}, fgqlse): 
}。 foqlse): 


mW 司 ビビ ピロ TI ロ N- コ 32 m 数 値 入力 ・ ス ライ ダー 入力 の 専用 フィ ー ル ド に する 


プラ ウザ で index.html を 表示 し 、 数 値 入力 専用 フィ ー ル ド や スラ イダ ー を 調整 し た 後 、| 確 
認 | ボタ ン を クリ ッ ク す る と 、 フィ ー ル ド の 値 が 表示 され ます 。 


注文 番号 :5ie 周 


注文 人 数 : ーーーーW- 


還 Eee ・596 


注文 valueAsNumber): 596 
注 又 (value 


注 叉 1 IS 回 





数 値 入力 専用 に する に は 
mm 唐 | 「input」 要 素 の 「type」 属 性 で 「number」 を 指定 する 


フィ ー ル ド を 数 値 入 力 専用 に する に は 、「input」 要素 の |type」 属 性 で 「number」 を 
指定 し ます 。「number」 を 指定 する と 、 プラ ウザ に よっ て は 、 フィ ー ル ド の 横 に スピ ン ボ タ 
ン が 表示 され ます 。 スマ ー ト フォ ン で は 数 値 だ け 入 力 可能 な ソフ トウ ェ ア キ ー ボ ー ド が 表 
示さ れ ま す 。 

また 、 直 接 、 数 値 を 入力 する の で は な く 、 ス ライ ダー を 指定 する こと も で きま す 。 ス ライ ダー 
を 表示 する 場合 は 、「type」 属 性 に 「range」 を 指定 し ます 。 スラ イダ ー の 数 値 寺 囲 を 指 
定 する 場合 、 最小 値 を 「min」、 最大 値 を 「max」 で 指定 する こと が で きま す 。 スラ イダ ー 
に 対応 し て いな い ブ ラウ ザ で は 、 従来 通り の テキ スト フィ ー ル ド が 表示 され ます 。 

数 値 入力 の 場合 で も 、 ]avaScript で 「valne」 プ ロ パ ティ を 使っ て 値 を 読み 出す と 、 文 
字 型 に な っ て し まい ます 。 数 値 型 と し て 読み 出す に は 、| valueAsNumber」 プ ロ パ ティ か 














ら 読 み 出 し ます 。 

関連 項目 bb 
全 内 容 を Date 型 / 数 値 型 と し て 読み 出す か ます サバト すし し 生ま で デ ザ アイ スイッチ メル D.327 
@ 数 値 専 用 の フィ ー ル ド で 値 を 増減 する 信和 な 4 党委 まや 4 D.335 
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ニニ 1 = 抽 昌代 較正 EEE を EC を E 
カラ ー ビ ピッ カー を 表示 する 


ここ で は 、 カ ラー ピッ カー を 表示 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<Scrtpt src="]S/saqmple.]s"></scrtpt> 
</hegd> 
<body> 
<form> 
<tnput type="color" 1d="myColor"><br> 
<tnput type="button" 1d="check" vgtue=" チ ェ ッ ク "> 
</for> 
< く OutDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. addEventLitstener("1oagd" , functton(){ 
var ele = document.getElementsByTagName( "output")[@] : 
// ボタ ン 要 素 の 読み 出し 
var btn = document .getElementById("check"): 
// ボタ ン に イベ ント を 割り 当て 
btn.qddEventLtstenerC"cltck",。 functionCevt){ 
// 選択 され た カラ ー コ ー ド を 取得 
var color = document.getEtementById( "myColor").value: 
e1e.innerHTML = "カラ ー コ ー ド :"+COLor: 
+, fglse): 
}, foqtse): 











mm 王 ビ ビ TI ロ N - コ コ mw カラー ピッ カー を 表示 する 


ブラ ウザ で index.html を 表示 する と 、| type デ color'」 を 指定 し た 要素 は セレ クト メニ ュー と 
似 た よう な 形状 に な り 、 クリ ッ ク す る と カラ ー を 選択 で きま す 。 


上 
避 


年 目 目 目 目 目 
邊 目 目 目 | | 


8 
上 目 目 目 上 


邊 目 自明 目 目 中 | 
利用 目 軒 胃 目 | | 
邊 用 目 目 目 目 目 四 
重用 目 目 目 目 目 目 


四 用 | 目 目 目 目 目 


色合い CE 109 床 (RO 55 
の 幸 や か さ (S 135 線 G》 200 
| 色 の 作成 (D) >> | 色 | 純 色 (Q) 本 &&U120 者: 156 





カラ ー コ ー ド :#37c89c 





カラ ー ビ ッ カー を 表示 する に は 
mM 央 「input」 要 素 の 「type」 属 性 に 「color」 を 指定 する 


カラ ー ビ ッ カー を 表示 する に は 、|input」 要素 の | type」 属 性 に 「color」 を 指定 し ます 。 
| color」 を 指定 し た 場合 、 す べ て の カラ ー を 選択 で きる わけ で は あり ませ ん 。 あら か じ め 、 
用 意 さ れ て いる カラ ー か ら 選 択 す る こと に な り ま す 。 その 際 、| datalist」 要素 と 組み 合わ 
せる こと で 、 任意 の カラ ー を 表示 する こと が で きま す 。 
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LIE 10 1 Chrome_ 


=1 ゴ FilmINBc に と | 
テー タリ スト を 定義 する 


ここ で は 、 デー タリ スト を 定義 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metog charset="utf-8"> 
<tttte>SampLe</t1tle> 
<SCrtDt Src="]S/sqmple.]S"></SCr1Dt> 
</head> 
<body> 


<form> 





<1tnput type="search" naqme="food" 1d="food" 11st="keywords "> 
<dataltst 1d="keywords"> 
<optton value=" 和 白米"> 白 米 </option> 
<option vglue=" 白米 (コシ ヒカリ )"> 和 白米 (コシ ヒカリ )</option> 
<optton vaqlue=" 和 白米 (と どろ き 早 生 ) "> 白米 (と どろ き 早 生 )</option> 
<option value=" 玄 米 "> 玄 米 </option> 
<option value=" 五 填 米 "> 五穀 米 </optton> 
</dqtal1St> 
</formW> 
<OUutDu キ ></OuUt て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener( "load" 。 functton(){ 





var ele = document .getEtLementsByTagNgme( "output")[9] : 
// フィ ー ル ド の 読み 出し 
var ftld = document.getElementById( "food"): 
// フィ ー ル ド に イベ ント を 割り 当て 
ftd.addEventLtstener( "change" , functton(Cevt){ 
// 選択 され た 内 容 を 読み 出し 
var text = thts .vaLue : 
// 結果 を 出力 
ele.innerHTML = "選択 し た 項目 :"+text: 
}, fgqlse): 
} false): 
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天王 ロ TI ロロ N- ヨ コス mw デー タリ スト を 定義 する 


ブラ ウザ で index.html を 表示 し 、 テキ スト フィ ー ル ド に 文字 を 入力 する と 、 該当 する リス ト が 
表示 され ます 。 





選択 し た 項目 : 日 米 ( コ シ ヒ カリ ) 





= 認 = 中 デー タリ スト を 表示 する に は 「datalist」 要素 を 使う 


フィ ー ル ド に 文字 を 入力 する 際 に 、 あら か じ め 入 力 さ れる 可能 性 が 高い も の を デー タリ 
スト と し て 用 意 し て お く こ と が で きま す (オー トコ ンプ リー ト / サ ジェ スト 機能 )。 デー タリ スト は 
特別 な た スク リプ ト を 記述 する 必要 は な く 、 HTML の 「datalist」 要素 を 使っ て 定義 し ます 。 
「 datalist」 要素 内 に | option」 要素 を 使い 、 表示 され る 項目 を 列記 し ます 。 また 、 テキ ス 
ト フ ィ ー ル ド で は 「list」 属 性 に | datalist」 要素 の ID 名 を 指定 する こと で 、 対応 する デー 
タリ スト を 指定 する こと が で きま す 。 デー タリ スト を 利用 し て 人 人力 され た テキ スト フィ ー ル ド の 
内 容 は 、| value」 プ ロ パ ティ を 使っ て 読み 出す こと が で きま す 。 
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=1 ヨ malmlNBcc に 
音声 入力 を 行う 


ここ で は 、 音声 入力 を 行う 方 法 と 、 入力 完了 後に 処理 する 方 法 に つい て 解説 し ます 。 
HT 埋 し の コー ド (lndex.htm) 


<!DOCTYPE html> 
<html> 
<hegd> 
<rmetg charset="utf-8"> 
<tttte>Sampte</titte> 「 
<SCr1pt src=")s/sqmpte.jsS"></scrtpt> 
</hegd> 
<body> 
<form> wi! 
<input type="text" 1 本 9WyWotce* Xx-webkit-speech> 
</form> 
<OUtDut></OutDut> 


</body> 
</html> 


JavaScript の コー ド (sample.js) 


window.gddEventLtstener("togd", functton(){ 
var ele = document.getElementsByTagName( "output")[9]: 
// input 要 素 の 読み 出し [ 
Var VOtCce = document.getELementBy1dC"myVoce"): 
// イベ ント を 割り 当て 
votce .aqddEventLitstener( "webkitspeechchange" , functionCevt){ 
// 音声 入力 され た 文字 を 出力 
ele.innerHTML = votce.vglue: 
す , faqlse): 
+, false): 





ブラ ウザ で index.html を 表示 し 、 テ キス ト フ ィ ー ル ド 右 側 に ある マイ クア イコ ン ( ボ タン ) を クリ ッ 
ク す る と 、 マイ ク の ふき だ し が 表示 され る の で 、 マイ ク に 向かっ て 話し ます 。 


お 話し くだ さい 


Ao 
(* ャ シャ みう 





生 司 ビ ロ 丁 | 口 N - ヨ 5 m 音声 入力 を 行う 


音声 の 入力 が 完了 する と 、 イベ ント が 発生 し 、 音声 入力 され た 文字 が テキ スト フィ ー ル ド の 
下 に 表示 され ます 。 





音声 入力 を 行う に は 
mMMMI [input」 要 素 に 「x-webkit-speech] 属 性 を 指定 する 


音声 入力 を 行う に は 、「input」 要 素 に | x-webkit-speech」 属 性 を 指定 し ます 。 これ で 
自動 的 に テキ スト フィ ー ル ド の 右側 に マイ クア イコ ン ( ボ タン ) が 表示 され ます 。 この マイ ク 
アイ コン を クリ ッ ク す る と 、 音声 入力 を 行う た め の 吹 き 出し が 表示 され ます 。 吹き 出し が 表 
示さ れ て か ら 話 し た 内 容 が 解析 され 、 テキ スト フィ ー ル ド に 入り ます 。 な お 、 音声 入力 後 
の 解析 処理 は サー バー 側 で 行わ れる の で 、 ネッ トワ ー ク に 接続 され て いる こと が 条件 に 
な り ま す 。 

また 、 音声 入力 が 完了 し た 場合 は 、| webkitspeechchange」 イ ベン ト が 発生 し ます 。 
この イベ ント が 発生 し た ら 、 テキ スト フィ ー ル ド の 内 容 を 読み 出し て 処理 を 行い ます 。 













IdVG 誕 NGGTWTH EE だ IE に 4 ェ e 


789 





IdV 詩 〇 NGGT]W」TH 庄 に FE に 4 


790 


LIE9 1 Chrome 」 LAndroid4 1WP_ 


=】1 コ mMlmlN 旭 cc1= 
ブラ ウザ の ペー ジ 読 み 込み タイ ミン グ を 
取得 する 

ここ で は 、 プ ラウ ザ の ペー ジ 読 み 込み タイ ミン グ を 取得 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttle>Sample</ttt1e> 
<SCPrtDt Src="]S/saqmple.]S"></scrtpt> 
</hegd> 
<body> 
<h1> タ イミ ング 表示 </h1> 
< く OU て Du キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventLtstener("1ogd"。 functton(){ 

var ele = document.getElementsByTagName( "output ")[9] : 

// 読み 込み 種類 で 表示 する 文字 を 配列 に 設定 

var logdType = [" ク リッ ク ま た は URL 入力 ", "リロ ー ド ", "進む / 戻 る ボタ ン "]: 

// 読み 込み 種類 を 取得 

var nType = performance .navtgatton .type: 

ele.innerHTML = "種類 :"+1ogdType[nType]+"<hr>": 

// 各種 タイ ミン グ に 関す る プロ パテ ィ を 配列 に 設定 

var param =[ 
"navtgattonStagrt" "untoadEventStart" "untogdEventEnd" 、 "redirectStart"。 
"redtrectEnd" 。 "fetchStart" "domatnLookupStart" "domatnLookupEnd", 
"ConnectStart" "connectEnd", "secureConnecttonStart"。 "requestStart"。 
"responseStart"。 "responseEnd"。 "domLoadtng" , "domInteracttve"。 
"domContentLogdedEventStart", "domContentLoadedEventEnd" , 
"domCompLete"。 "LogdEventStart"。 "1ogdEventEnd" 

」j 

// 現在 の 時 間 と 開始 時 間 を 取得 

var now = (new Date()).getTtme(): 

var stgqrtTtme = performance .ttming.navtgottonStgrt : 

// それ ぞ それ の タイ ミン グ 値 を 表示 

for(var 1=9: 1<param.Length: 1++){ 
// タイ ミン グ プ ロ パテ ィ を 読み 出し 
Var measureTtme = performance .timtng[param[1]] : 
tf (measureTtme - startTtme >= 9){ 


ele.tnnerHTML += parqm[1]+" : "+CmeasureTtme - stgartTime)+" ミ リ 秒 <br>": 


還 ビ ロ T| 口 NN- ヨ コ 6 m ブラ ウザ の ペー ジ 読 み 込み タイ ミン グ を 取得 する 


+elset K4 
// 取得 で き な い 場合 の 処理 
ele.innerHTML += param[i]+" : 不明 <br>": 

} 


} 
+, fqlse): 


ブラ ウザ で index.html を 表示 し 、 ペー ジ が 読み 込ま れる と 、 どの よう な 方 法 で 読み 込ま れ た 
か 、 ど の よう な タイ ミン グ で 各種 情報 が 読み 込ま れ た か が 表示 され ます 。 


タイ ミン グ 表 示 


種類 : クリ ッ ク ま た は URL 入力 


navigationStart : 0 ミリ 秒 
unloadEventStar : 31 ミ リ 秒 
unlcadEventEnd : 31 ミ リ 秒 
redirectStart : 不明 
redirectEnd : 不 B 


jetchStart : 0 ミリ 秒 に 
domainLookupStart : 0 ミリ 秒 
domainLookupEnd : 0 ミリ 秒 
connectStart : 0 ミリ 秒 

connectEnd : 0 ミリ 秒 
secureConnectionStart : 不明 
requestStart : 2 ミリ 秒 

responseStart : 31 ミ リ 秒 

responseEnd : 32 ミ リ 少 

domLoading : 31 ミ リ 秒 

domlnteractive : 76 ミ リ 秒 軸 
domContentLoadedEventStart : 76 ミ リ 秒 
domContentLoadedEventEnd : 76 ミ リ 秒 
domComplete : 76 ミ リ 秒 
loadEventStar : 76 ミ リ 秒 
loadEventEnd : 不明 










読み 込み タイ ミン グ を 取得 する に は 還 還 還 較 
「performance.navigation」 オ ブ ジ ェクト の 難 種 プ ロバ ティ を 使う 


読み 込み タイ ミン グ を 取得 する に は 、「performancenavigation」 オ プ ジ ェ クト の 各種 
プロ パテ ィ を 参照 し ます 。 プロ パテ ィ に は 、 その 処理 が 行わ れ た 時 点 で の 時 間 を 示す ミ 
リ 秒 が 入り ます 。 この ミリ 秒 は 、 実行 し た 時 点 で の 日 時 を 示し ます 。 

状況 に よっ て は 、 タイ ミン グ を 正しく 取得 で き な い 場合 が あり ます 。 この 場合 、 ペー ジ 読 
み 込 み 開始 時 間 よ り も 以前 の 時 間 ミリ 秒 ) に な り ま す 。 
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き ご ビビ TI ロロ N- コ コ 6 mw ブラ ウザ の ペー ジ 読 み 込 み タ イミ ング を 取得 する 









Sm 4 ワル と SS 失い 
ペー ジア ン ロ ー ド イベ ント 開始 
ペー ジア ン ロ ー ド イベ ント 終了 
口 
口 こ 
開始 




















プ エ 


接 
セキ ュ ア 
DOM 読 み 込み 


また 、 どの よう な 方 法 (URL 指 定か リロ ー ド か な ど ) で 読み 込ま れ た か は 、「performance. 
navigation」 オ プ ジ ェ クト の | type」 プロパ ティ で 取得 する こと が で きま す 。 











































| 0 | TYPE_NVIGATE | クリ ッ ク さ れ た か URL を 入力 し て ペー ジ に 移動 
| 1 | TYPEREMOAD _ | ES 
ブラ ウザ の [進む 」 [戻る ] ボ タン で ペー ジ 移 動 








) 
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mm 沿革 三 リ 秒 必 下 の 計測 





ミリ 秒 以 下 の 計測 を 行う た め の 仕様 の 策定 も 行わ れ て いま す 。 計測 時 間 は 、「DOM 


HighResTimeStamp」 型 と し て 定義 され 、「now() 」 メソッド を 使っ て 時 間 を 取得 する こ 
ど が で きま す 。 
http://WWW.w3.org/TR/2012/CRH-hr-time-20120522/ 
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LIE8 Chrome 』 Safari 5 | Firefox 4 1 Opera 11 | Android 4 1 WP _ 





EE TTFEIN- コメ 
等 な る オリ ジン の イン ライ ン フ レー ム に 
ae いさ ーー 
メッ セー ジ を 送信 する 
ここ で は 、 クロ ス ド キ ュ メ ント メッ セー ジン グ を 使っ て 異な る オリ ジン の イン ライ ン フ レー ム に メッ 
セー ジ を 送信 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド / 送 信 側 (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metq charset="utf-8"> 
<tttle>SampLe</tttle> 
<SCP1Dpt src="]S/sample .]S"></SCr1Dt> 

</head> 

<body> 
<h1> ク ロス ドキ ュ メ ント メッ セー ジ </h1> 
<divstframe に 1 秒 ご と に 日 付 情報 を 送信 </div> 
<tframe 1d="clock" src="../sqmpte_tfrqme/" wtdth="369" hetght="190"> 
</1frame> 

</body> 

</html> 


JavaScript の コー ド / 送 信 側 (sample.js) 


window .addEventLitstener("1ogd" ,。 sendDoateTtme , faqtse): 
functton sendDateTtme( )1{ 
// メッ セー ジ を 送信 ずる iframe 要 素 
var targetFrame = document.getElementById("clock"): 
// 現在 時 刻 を 取得 
var daqteTtme = (new Date()).toStrtng(): 
// 送信 先 の オリ ジン を 設定 。 * な ら オ リジン 間 わ な い 
var tagrgetOrtgin = "*"・ 
// tfrqme 要 素 に 現在 時 刻 を 送信 
targetFragme . contentWtndow.postMessaqge(dateTtme, targetOrtgtn): 
// 1 秒 ご と に 繰り 返し 送信 


setTtmeout(arguments.callee, 1999): 





HTML の コー ド / 受 信 側 (index.html) 


<!DOCTYPE html> 
<html> 


IdVS 計 NGG]W 和 TH 記 EEE に 4sm 


<head> 
<metqg charset="utf-8"> 
<t1tle>SqampLe</t1tle> 
<style>body { font-s1ze: 79%: }</style> 


<SCrtPt Src="]S/sqmple.]S"></SCrtD キ > 
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還 E ビ ビ TIHN- コ ヨコ 7 mW 異な る オリ ジン の イン ライ ン フ レー ム に メッ セー ジ を 送信 する 


</hegd> | マ | 


<body> 
<h4> 受 信 メ ッ セ ー ジ </h4> 
<div> 受 信 し た デー タ : <output></output></div> 
<div> 送 信 元 オリ ジン :<output></output></dtv> 
</body> 
</html> 





JavaScript の コー ド / 送 信 側 (sample.js) 


wtndow.qddEventListener("messgge", functtonCevt){ 
var ele = document.getEtementsByTagName( "output"): 
// 受信 し た メッ セー ジ を 画面 に 出力 
ele[9] .tnnerText = ele[9] .textContent = evt.datq: 
// 送信 元 の オリ ジン を 画面 に 出力 
ele[1] .tnnerText = ele[1] .textContent = evt.ortgtn: 
}, faqlse): 


ブラ ウザ で 送信 側 の index.html を 表示 する と 、 異な る オリ ジン に ある イン ライ ン フ レー ム に メッ 
セー ジ ( デ ー タ は 現在 の 日 時 ) を 送信 し ます 。 受信 側 で は 、 送信 きれ た デー タ を ペー ジ 上 に 表 
示し ます (た だ し 、 受信 側 の index.html を 表示 し て も 何 も 表 示さ れ な い ) 。 


クロ ス ド キ ュ メ ント メッ セー ジ 


ifame に 1 秒 こ と に 日 付 情報 を 送信 


受信 メッ セー ジ 


愛 信 し た テー タ : Fn May 4 22-33-24 UTC+0900 2012 
送信 元 オリ ジン : ittp:www_openspc2.org 





] 
上 
ン 
TL 
= 
= 内 
ん 
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m 万 ピ TI1 口 NN - ヨ ヨプ mW 異な る オリ ジン の イン ライ ン フ レー ム に メッ セー ジ を 送信 する 





DoGtMagsageO」 メ ン ッ ド を 使う = 

イン ライ ン フ レー ム に メッ セー ジ を 送信 する に は 、「postMessage () 」 メ ソ ッ ド を 使い ます 。 
[postMessage () 」 メ ノッ ド を 使う と 、 異な る オリ ジン (プロ トコ ル + ド メイ ン + ポ ー ト 番号 ) に 
対し て デー タ を 送信 する こと が で きま す 。「postMessage () 」 メ ソ ッ ド の 最初 の パラ メー タ 
に は 、 送信 する デー タ を 指定 し ます 。 2 番目 の パラ メー タ に は 、 送信 先 の オリ ジン を 文字 
列 で 指定 し ます 。 特に 指定 する 必要 が な い 場 合 に は 、| * 」 と し ます 。 

「postMessage() 」 メ ソ ッ ド で デー タ を 送信 し た 場合 、 受信 側 の イン ライ ン フ レー ム で は 
「message」 イ ベン ト が 発生 し ます 。「onmessage」 プロ パテ ィ に イベ ント ハン ドラ を 設定 
する か 、「addEventListener() 」 メ ノッ ド を 使っ て イベ ント リス ナー を 設定 し ます 。 

イベ ント ハン ドラ に は 、 イベ ント オプ ジェ クト が 渡さ れ ま す 。 イベ ント オプ ジェ クト の | data」 
プロ パテ ィ に 、 受信 し た デー タ が 入っ て いま す 。 また 、 受信 し た デー タ が どこ の オリ ジン の 
も の か 確認 する 場合 に は 、 イベ ント オブ ジェ クト の 「origin」 プロパ ティ を 参照 し ます 。 
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LChrome 」 Safari 5 | Firefox 10 」 


=1 ヨ mMlmINEc に 1= 
映像 を フル スク リー ン 表 示 に する 


ここ で は 、 ペー ジ 内 に 表示 され て いる 映像 を フル スク リー ン 表 示 に する 方 法 に つい て 解説 し 
ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq Chagrset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<SCPtDt src="]S/sample.]S "></scrtpt> 
</hegd> 
<body> 
<h3> フ ルス クリ ー ン 表示 </h3> 
<vtdeo wtdth="384" hetght="216" controts> 
<SOurce Src="vtdeo/waterfa1l1l .mov"> 
<Source Src="vtdeo/waterfall .ogv "> 
</vtdeo> 
<for> 
<tnput type="button" vaqlue=" 全 画面 に する " id="setFS"> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("1ogd"。 functton(){ 
// ボタ ン に イベ ント を 設定 
document .getELementByTd("setFS").gddEventListener("ctick"。functionC(){ 


「 本 も 


IdV む 庭 〇 NGGTATH ヨ エ コマ ロロ 


Var myVitdeo = document.getE1ementsByTagName("vtdeo")[9] : 
// Sgqfqri/Googte Chrome 用 





1tf(myVtdeo .webkttRequestFul1Screen){ 
mmyVtdeo .webkttRequestFu11Screen(): 

} 

// Firefox 用 

tf (myVtdeo.mozRequestFul1LScreen){ 
myVtdeo.mozRequestFul1Screen(): 

} 

+, false): 
}。fqtlse): 
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映像 を フル スク リー ン 表 示 に する 


ブラ ウザ で index.html を 表示 し 、| 全 画面 に する 」 ボ タン を クリ ッ ク す る と 、 映 像 が フル スク リー 
ン ( 全 画 面 ) で 再生 きれ ます 。 


FireTOX マ 


L 前 - 思 ccooc | 会 | 還 | 枯 








フル スク リー ン 表 示 の 場合 、 最初 に 画面 上 に 元 に 戻す 方 法 が 表示 され ます 。 esc キ ー を 提 
す と 元 の 状態 に 戻り ます 。 


IdV ご 詩 〇 NG 11H 
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還 王 ビビ ロ TI ロ N - は 日 mW 映像 を フル スク リー ン 表 示 に する 


映像 を フル スク リー ン に する に は 
idei 洋 [video| 要素 の 「requestFullscreen() 」 メソ ッ ド を 使う 


映像 を フル スク リー ン に する に は 、「video」 要素 の [requestFullscreen () | メソッド を 
使い ます 。 フル スク リー ン 表 示 が 可能 な プラ ウザ で あれ ば 、 映像 が フル スク リー ン で 再生 
され ます 。 また 、 フル スク リー ン 再 生 開 始 時 に は 元 の 画面 に 戻す 方 法 が 画面 に 一 時 的 
に 表示 され ます 。 

仕様 で は 、 フ ルス クリ ー ン 状態 を 元 に 戻す に は 、「exitFullscreen () 」 メ ソノ ツボ を 使い ます 。 


mm 癌 四 2 に 上 還 FlSCreen API の ベン ダー プレ フィ ックス 


2012 年 現在 、Fullscreen APTI は ベン ダー プレ フィ ックス 付き で 使用 する こと が で きま 
す 。 また 、 仕様 で は FullScreen の S が 小文字 に な っ て いま す が 、 ベン ダー プレ フィ ックス 
付き の も の は 大 文字 に な っ て いま す 。 Safari や Google Chrome な どの WebKit 系 で は 
| webkitRequestFullScreen() 」 メ ノッ ド 、 Firefox で は 「mozRequestFullScreen () 」 
メソ ッ ド を 使っ て フル スク リー ン モ ー ド に する こと が で きま す 。 

フル スク リー ン モ ー ド を 解除 する に は 、 Safari や Google Chrome で は 「webkitCancel 
FullScreen ) 」 メ ソ ッ ド 、 Firefox で は 「mozCancelFullScreen () 」 メ ソ ッ ド を 使い ます 。 
















関連 項目 


e 画像 を フル スク リー ン 表 示 に する …… ACB EHP np.799 
* テキ スト を フル スク リー ン 表 示 に する …………… パ ババ HOO > 光 症 も p.808 
ゅ イン ウイ ウフ ホーム 導 流 メ クー シン 表示 に すま 入 Me 才 は 20 い t220000h p.805 
@ フル スク リー ン と 通常 表示 が 切り 替わっ た ら 処 理 を 行う 人 たく が ACE p.808 


だ ENN この 


画像 を フル スク リー ン 表 示 に する 








ここ で は 、 ペー ジ 内 に 表示 され て いる 画像 を フル スク リー ン 表 示 に する 方 法 に つい て 解説 し 
ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<tttle>SqmpLe</ttt1e> 
<style> 

#sunftower : -webktt-futt-screen { 
wtdth: 7Z9Dpt: 
height: 1989pt: 

} 

・- 串 OZ-fullt-screen #Sunflower{ 
wtdth: 720pt: 
hetght: 1989pt: 

} 

#contatner: -moz-fult-screen { 
dtsplay: table-cell: 
text-qltgn: Center: 
verttcat-altgn: mtddle: 

} 

</style> 
<SCrtpt src="]S/sqmple .]S "></SCrtDt> 

</head> 

<body> 
<h3> 画 像 を フル スク リー ン 表 示 </h3> 
<dtv 1d="contagtner"> 
<tmg src="tmages/photo.jpg" 1d="sunftower" qlt=" ひ まわ り " width="72" hetght="108"> 
</d1V> 
<forr> 

<input type="button" vatue=" 全 画面 に する " id="setFS"> 

</form> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


window .addEventLtstener("1ogd"。 functton(){ 
// ボタ ン に イベ ント を 設定 
document .getEtementById("setFS").gddEventListener("clLtck",functton(){ 





var myImage = document.getEtementByTd("sunftLower"): 
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和 m コ E ビ TI ロロ N- コ 9 m 画像 を フル スク リー ン 表 示 に する 


// Sqfagri/Googte Chrome 用 4 
tf(myImage .webk1ttRequestFul1Screen){ 
myImoge .webk1ttRequestFul1Screen(): 
} 
// Firefox 用 
1t† (myImage .mozRequestFut1Screen){ 


myTmage . ParentNode .mozRequestFulLScreen( ) : 


} 
}, faqlse): 
#, false): 
フラ ウザ で jndex.html を 表示 し 、| 全 画 面 に する 」 ボ タン を クリ ッ ク す る と 、 画 像 が フル スク リー 
ン ( 全 画 面 ) に な り ま す 


FirefoX マ 


5EZ コ IE 72Ir IP 


画像 を フル スク リー ン 表 示 





フル スク リー ン 表 示 の 場合 、 最初 に 画面 上 に 元 に 戻す 方 法 が 表示 され ます 。 esc キ ー を 押 
す と 元 の 状態 に 戻り ます 。 





mm 戸 ビ ピロ T| 口 N - ヨ 9 mw 画像 を フル スク リー ン 表 示 に する 


画像 を フル スク リー ン に する に は 
md 「img」 要 素 の 「requestFullscreen()」 メソッド を 使う 


画像 を フル スク リー ン に する に は 、|img」 要素 の | requestFullscreen() 」 メ ノッ ド を 使 
いま す 。 た だ し 、 Safari や Google Chrome と Firefox の 両方 で 同じ よう に 動作 させ る に 
は 、 スタ イル シー ト 、 お よび 、 HTML 有 要素 に 工夫 が 必要 で す 。 まず 、 Firefox に 対応 きせ 
る 場合 に は 、[img」 要素 を 囲む 親 要素 (| divV」 要素 な ど ) が 必要 に な り ま す 。 Safari や 
Google Chrome の 場合 は 直接 、| img」 有 要素 の | requestFullscreen () 」 メ ノッ ド を 呼び 
出せ ば フル スク リー ン に な り ま す が 、 Firefox で は div 要 素 な ど で 囲 み 、 さら に スタ イル シー 
ト を 設定 する 必要 が あり ます 。 Firefox の 場合 は 「img」 要素 と 、 親 要 素 の 両方 に フル ス 
クリ ー ン モー ド 時 の 表示 位置 や サイ ズ な ど を 設定 し ます 。 


mm 融 時 問題 FUllISCTrGBn API の ベン ダー プレ フィ ックス 


2012 年 現在 、Fullscreen API は ベン ダー プレ フィ ックス 付き で 使用 する こと が で きま 
す 。 また 、 仕様 で は FullScreen の S が 小文字 に な っ て いま す が 、 ベン ダー プレ フィ ックス 
付き の も の は 大 文字 に な っ て いま す 。 Safari や Google Chrome な どの WebKit 系 で は 
「 webkitRequestFullScreen () 」 メソ ッ ド 、 Firefox で は 「mozRequestFullScreen() 」 
メソ ッ ド を 使っ て フル スク リー ン モ ー ド に する こと が で きま す 。 












関連 項目 ょ ゅ 


e 映像 を フル スク リー ン 表 示 に する ドド imimit… D.796 
e テキ スト を フル スク リー ン 表 示 に する ……… の li ーー ドド ドド ーーー p.802 
$ ぁ インライン フレ ー ム を フル スク リー ン 表 示 に する … 〇 つの 他人 また 写 ドド ーー… 0.805 
ぁ ゅ フル スク リー ン と 通常 表示 が 切り 替わっ た ら 処 理 を 行う …※… 上 つつ つ つ 字 ーーー p.808 
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LChrome 』 Safari 5 | Firefox 10_ 


BE ビビ ロ T1 品 NN- ヨ オロ 


テキ スト を フル スク リー ン 表 示 に する 





ここ で は 、 ペー ジ 内 に 表示 され て いる テキ スト な どの 領域 (セク ショ ン な ど ) を ブフ ルス クリーン 
表示 に する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<tttle>Sqmp le</t1t1e> 
<Style> 
莉 WatnText: -webk1t-full-screen { 
wtdth: 190%・ 
hetght: 190%: 
} 
#contatner:-mmOz-full-screen { 
wtdth: 190%: 
hetght: 19 の %: 
background-color: whtte: 
} 
matnText { 
color: black: 
} 
</style> 
<SCPrtDt Src="]S/sample.]S"></SCr1Dt> 
</head> 
<body> 
<h3> テ キス ト を フル スク リー ン 表 示 </h3> 
<dtv 1d="contaqtner"> 
<div id="matnText"> 時 は 22 世 紀 。 人 々 は ネコ 型 の ロボ ッ ト と 暮らし て いた 。 </dtv> 


</d1V> 





<form> 
<tnput type="button" vatue=" 全 画面 に する "id="setFS"> 
</forr> 
</body> 
</html> 


JavaScript の コー ド (sample.j5) 


wtndow .qddEventLtstener("Logd"。 functton(){ 
// ボタ ン に イベ ント を 設定 
document.getELementById("setFS").qddEventListener("cltck"。 functton(){ 


IdvS き SrtScnn 1 語 生 Reel 


var myText = document.getElLementById( "matnText"): 
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三 ピロ TI ロ N - コ オロ mw テキ スト を フル スク リー ン 表 示 に する 


// Sgqfqrt/Google Chrome 用 公 4 
tfCmyText .webkttRequestFultScreen){ 
myText.webkttRequestFulLLScreen(): 
} 
// Firefox 用 
tf (myText.parentNode .mozRequestFuLLScreen)+ 
myText.parentNode .mozRequestFullScreen(): 
} 
+, faqlse): 
}, false): 


ブラ ウザ で index.html を 表示 し 、「 全 画 面 に する 」 ボ タン を クリ ッ ク す る と 、 テキ スト が フル スク 
リー ン ( 全 画面 ) で 表示 され ます 。 


テキ スト を フル スク リー ン 表 示 


時 は 22 世 紀 。 人 人々 (は ネコ 型 の ロボ ッ ト と 暮らし て い 





フル スク リー ン 表 示 の 場合 、 最初 に 画面 上 に 元 に 戻す 方 法 が 表示 され ます 。 esc キ ー を 押 
す と 元 の 状態 に 戻り ます 。 


リウ TU も 
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生 呈 ビビ ピロ T「 口 NN - ヨ オロ mw テキ スト を フル スク リー ン 表 示 に する 


テキ ス ト を 囲ん で いる 要素 の ie ()」 メ ソ ッ ド を 使う 


テキ スト を フル スク リー ン に する に は 、 テ キス ト を 囲ん で いる 要素 の | requestFullscreen 
() 」 メソ ッ ド を 使い ます 。 た だ し 、 Safari や Google Chrome と Firefox の 両方 で 同じ 
うに 動作 させ る に は 、 スタ イル シー ト 、 お よび 、 HTML 要 素 に 工夫 が 必要 で す 。 ま 
ず 、 Firefox に 対応 させ る 場合 に は 、 テキ スト を 内 包 し て いる 要素 を さら に 囲む 親 要素 


(「div」 要素 な ど ) が 必要 に な り ま す 。 Safari や Google Chrome の 場合 は 直接 、 テキ ス 
ト を 内 包 し て いる 要素 の 「requestFullscreen () 」 メ ソ ッ ド を 呼び 出せ ば フル スク リー ン に 
な り ま す が 、 Firefox で は div 要 素 な ど で 囲 み 、 さら に スタ イル シー ト を 設定 する 必要 が あり 
ます 。 Firefox の 場合 は 、 テ キス ト を 内 包 し て いる 要素 と 、 内 包 し て いる 親 要素 の 両方 に 
フル スク リー ン モ ー ド 時 の 表示 位置 や サイ ズ な ど を 設定 し ます 。 


mm 東上 較 FUllSCTBBh API の ベン ダー プレ フィ ックス 


2012 年 現在 、Fullscreen API は ベン ダー プレ フィ ックス 付き で 使用 する こと が で きま 
す 。 また 、 仕様 で は FullScreen の S が 小文字 に な っ て いま す が 、 ベン ダー プレ フィ ックス 
付き の も の は 大 文字 に な っ て いま す 。 Safari や Google Chrome な どの WebKit 系 で は 
「 webkitRequestFullScreen() 」 メソ ッ ド 、 Firefox で は 「mozRequestFullScreen() 」 
メソ ッ ド を 使っ て フル スク リー ン モ ー ド に する こと が で きま す 。 
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=1 コ mmlmlNBc と 
イン ライ ン フ レー ム を 
フル スク リー ン 表 示 に する 


ここ で は 、 ペー ジ 内 に 表示 され て いる イン ライ ン フ レー ム を フル スク リー ン 表 示 に する 方 法 に 
つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttle>Samp le</t1tle> 
<Style> 
#story: -webkit-full-screen †{ 
wtdth: 1090%: 
hetght: 190%: 
} 
#contatner:-moz-full-screen +† 
wtdth: 190%・ 
hetght: 190%・ 
「 
:-mmOZ-full-screen tframe + 
width: 190%・ 
hetght: 190%: 
background-color: whtte: 
color: blLack: 
} 
</style> 
<SCrtDpt src="]S/sample .]S"></SCr1Dt> 
</head> 
<body> 
<h3> イ ン ラ イン フレ ー ム を フル スク リー ン 表 示 </h3> 


<dtv 1d="contatner"> 





<tframe src="text.html" 1d="story" qallowfutltscreen webkttallowfutlscreen></1frame> 
</d1V> 
<formW> 

<tnput type="button" value=" 全 画面 に する " id="setFS"> 


</fori> 


ldV 計 9NGG 1W」H に EEEM4SE 


</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window .qddEventListener("1oqd" 。 functton()1 
// ボタ ン に イベ ント を 設定 
document .getEtementByTd("setFS").qddEventLitstener("cLtck"。 functton()+ 
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属 ビビ ロ T| 口 | - コ 4 1] mW イン ライ ン フ レー ム を フル スク リー ン 表 示 に する 


var myIframe = document.getEtLementBy1d( "story"): 4 

// Sqfqri/Googte Chrome 用 

1f(myIfraqme .webkttRequestFullLScreen){ 
myIframe .webk1tRequestFulLLScreen(): 

} 

// Ftrefox 用 

tf (myIframe .parentNode .mozRequestFutLScreen){ 
myIfraqme .DarentNode .mozRequestFutLScreen(): 

} 

}, faqlse): 
}, fglse): 


ブラ ウザ で index.html を 表示 し 、| 全 画 面 に する 」 ボ タン を クリ ッ ク す る と 、 イン ライ ン フ レー ム 
の 内 容 が フル スク リー ン ( 全 画面 ) で 表示 され ます 。 


イン ライ ン フ レー ム を フル スク リー ン 表 示 


むか し むか し 、 ある 所 に 怠け 者 の 娘 が お り 
まし た 。 人 人 々 は 娘 を ずぼら 娘 と 呼び バカ に 
し て いま し た 。 





フル スク リー ン 表 示 の 場合 、 最初 に 画面 上 に 元 に 戻す 方 法 が 表示 され ます 。 esc キ ー を 押 
す と 元 の 状態 に 戻り ます 。 な お 、 Google Chrome で は 「webkitallowfullscreen」 属 性 が 設 
定 さ れ て いな いと 、 全 画 面 表 示す る か どう か の 許可 ボタ ン が 表示 され ます 。 





生 王 じ TI ロロ NN- ヨ イオ 1 m イン ライ ン フ レー ム を フル スク リー ン 表 示 に する 


イン ライ ン フ レー ム を フル スク リー ン に する に は 
「iframe」 要 素 の 「requestFullscreen()」 メソ ッ ド を 使う 


ロロ NEPO ロ INT 


イン ライ ン フ レー ム を フル スク リー ン に する に は 、[ jame」 要素 の 「requestFullscreen)」 
メソ ッ ド を 使い ます 。 た だ し 、 Safari や Google Chrome と Firefox の 両方 で 同じ よう に 動作 さ 
せる に は スタ イル シー ト 、 お よび 、 HTML 要 素 に 工夫 が 必要 で す 。 まず 、 Firefox に 対応 さ 
せる 場合 に は 、 イン ライ ン フ レー ム を 囲む 親 要 素 (| div」 要 素 な ど ) が 必要 に な り ま す 。 Safari 


や Google Chrome の 場合 は 直接 、[ 近 ame」 要 素 の 「requestFullscreen()」 メ ノッ ド を 呼 
び 出 せ ば フル スク リー ン に な り ま す が 、Firefox で は | div」 要素 な ど で 囲 み 、 さ ら に スタ イル シー 
ト を 設定 する 必要 が あり ます 。 Firefox の 場合 は 、「 近 ame」 要 素 と 、 内 包 し て いる 親 要 素 
の 両方 に フル スク リー ン モ ー ド 時 の 表示 位置 や サイ ズ な ど を 設定 し ます 。 

また 、 Google Chrome で は 「 近 ame」 要 素 に 「 webkitallowfullscreen」 属 性 を 指定 
し て いな い 場 合 、 フル スク リー ン 表 示 を 許可 する か どう か の ボタ ン が 表示 され ます 。 


mm 章 昌 IN 織 FlSCFBBh API の ベン ダー プレ フィ ックス 


2012 年 現在 、 Fullscreen API は ベン ダー プレ フィ ックス 付き で 使用 する こと が で きま 
す 。 また 、 仕様 で は FullScreen の S が 小文字 に な っ て いま す が 、 ベン ダー プレ フィ ックス 
付き の も の は 大 文字 に な っ て いま す 。 Safari や Google Chrome な どの WebKit 系 で は 
「webkitRequestFullScreen() 」 メ ノッ ド 、 Firefox で は 「mozRequestFullScreen(0」 
メソ ッ ド を 使っ て フル スク リー ン モ ー ド に する こと が で きま す 。 








関連 項目 ょ ゅ 





e 映像 を フル スク リー ン 表 示 に する oo p.796 
e 画像 を フル スク リー ン 表 示 に する … ee p.799 
e テキ スト を フル スク リー ン 表 示 に する …0oorrreeeeememmeeeeeerreoeoeeerererro p.802 
e フル スク リー ン と 通常 表示 が 切り 替わっ た ら 処 理 を 行う ……… 〇 Co ご つじ [ コ だ Fieoeemrmrmrrt p.808 
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1 = 里 誠 較 1 四 に ドン ラン 


フル スク リー ン と 通常 表示 が 切り 替わっ た ら 
処理 を 行う 

ここ で は 、 フ ルス クリーン 表 示 と 通常 表示 、 通常 表 と フル スク リー ン 表 示 が 切り 奈 わ っ た ら 処 
理 を 行う 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<heqd> 
<metg charset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<Style> 

#sunflower : -webkitt-ful1l-screen { 
wtdth: 729pt: 
hetght: 1989pt: 

} 

・-WOZ-full-screen #sunftower{ 
w1dth: 729pt: 
hetght: 1989pt: 

} 

#Contqtner:-moz-full-screen { 
dtsplay: table-cell : 
text-qltgn: Center: 
Verttcgl-qltgn: middle: 

} 

</style> 

<SCrtpt src="]S/saqmple.]S"></scrtpt> 
</hegd> 
<body> 

<h3> フ ルス クリ ー ン 表示 </h3> 


<dtv 1d="contatner"> 





<tmg Src="tmages/photo.]〕pg" 1d="sunftower" qlt=" ひ まわ り " width="72" hetght="108"> 
</d1V> 
<forW> 
<tnput type="button" value=" 全 画面 に する "id="setFS"> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLitstener("1ogd"。 functton(){ 
// ボタ ン に イベ ント を 設定 
document.getELementById("setFS") .addEventLtstener("cttck"。functiton(){ 


IdVS き SSGTn 1 語 2 


Var myTmage = document.getElementByTd("sunftower"): 
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mW 王 ビ ロイ T| 口 NN - ヨ オス 2 mw フル スク リー ン と 通常 表示 が 切り 替わっ た ら 処 理 を 行う 


// Saqfqgrt/Google Chrome 用 人 
tf(myImage .webkttRequestFutLScreen)t 
myTmage .webkttRequestFulLScreen(): 
} 
// Ftrefox 用 
tf (myImage .mozRequestFulLScreen)t 
my1mage .pParentNode .mozRequestFulLScreen(): 
} 
}, faqlse): 
// イベ ント ハン ドラ を 設定 CFirefox 用 ) 
document . addEventLtstener("mozfuttscreenchange" , functton()+ 
altert(" 画 面 が 切り 替わり まし た "): 
}, false): 
// イベ ント ハン ドラ を 設定 CSqfgri/Googte Chrome 用 ) 
document . gddEventListener( "webkttfuttscreenchange", functton(){ 
gtert〈" 画 面 が 切り 替わり まし た "): 
} faqlse): 
}, false): 


プラ ウザ で index.html を 表示 し 、「 全 画面 に する ]」 ボ タン を クリ ッ ク す る と 、 フル スク リー ン ( 全 
画面 ) に な り ま す 


。) Sample 


ぅ >G Q 


』 フ ルス クリーン 表 示 





ャ ーー 
> し UJ 
すき 
フル スク リー ン 表 示 に 切り 替わる と 、 切 り 替 わっ た こと を 示す アラ ー ト ダイ アロ グ が 表示 され ます 。 u 
また 、 通常 の 画面 に 戻っ た と き に も 、 切り 替わっ た こと を 示す アラ ー ト ダイ アロ グ が 表示 され ます 。 エ 
現在 この ペー ジ は 全 画 面 表 示 で す 。 全 画 画 表 示 を 終了 (Esc) 7 
UI 
の 
の 
他 
の 
アア 
ユ 


中 画面 が 切り 替わり まし た 
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mW ビビ ロイ T| 口 NN - ヨ オ 2 mw フル スク リー ン と 通常 表示 が 切り 替わっ た ら 処 理 を 行う 


画面 切り 替え 時 に 処理 を 行う に は 
か 「fullScreenchangel」 イベ ント を 捕捉 する 


フル スク リー ン 表 示 に 切り 替わっ た 場合 、 も し く は 、 フル スク リー ン 表 示 か ら 通 常 表 示 に 
切り 葵 わっ た 場合 に 処理 を 行う に は 、「document」 オブジェ クト の 「fullscreenchange 」 
イベ ント を 捕捉 し ます 。 2012 年 7 月 時 点 で は 、 Firefox は 「mozfullscreenchange | イベ ン 
ト 、 Google Chrome/Safari は | webkitfullscreenchange」 イベ ント と し て イベ ント 名 が 
定義 され て いま す 。 

また 、 Firefox で は 、 フル スク リー ン 表 示 に な っ て いる か どう か は 、[「documentmoz 
FullScreen」 プ ロ パ ティ で 確認 する こと が で きま す 。 「 true」 で あれ ば フル スク リー ン 表 示 、 
| false」 な ら 通 常 表 示 に な り ま す 。 












関連 項目 > 





の 2 ィ KC だ ST 0.396 
he 拉 0、2xa0SSs Ak25Yos 20445476053228E2ER02cCH 0.397 
し だ の と 半生 p.796 
寺本 遇 業者 2 の 4 拓 お p.799 
し リリ の 2ー、 ー ト ジ ー ズ LC て 0 p.802 
ソラ イン ソフ トム K 才 の 電光 に 9 本 誠人 は 人 p.805 





=1 ゴ mglmINBc と に 
バイ ブレ ーション 機能 を 使う 


ここ で は 、 バイ プレ ーション 機能 を 使う 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 


<meta charset="utf-8"> 


<titte>SampLe</tttle> 
<scrtpt src="]S/sample.]S"></SCr1Dt> 
</head> 
<body> 
<h3> バ イブ レー ショ ン ノ 振動 </h3> 
<formW> 


<tnput type="button" vatue="3 秒 振動 " 1d="vtb1"> 
<tnput type="button" vgtue="3 回 振動 C2 秒 振動 、 1 秒 停止 の 繰り 返し )" id="vtb2"> 
</form> 


</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window . addEventListener("1oad" , functton()+ 
// ボタ ン 1 に イベ ント を 設定 
document . getEtementById( "vitb1").qddEventLtstener("cLtck" , functton( ){ 
navtgator .mozVibrate(3990) : 
+,。 false): 
// ボタ ン 2 に イベ ント を 設定 
document . getE1ementByTd( "vitb2").addEventLtstener("cLtck",function(){ 
navitgator .mozVtbrate([1999, 1999, 1999, 1999, 1999] ): 
+, fatse): 
+, false): 


回 還 加 回 


バイ ブレ ーション 機能 は 、 ノ ー ト 型 や デス クト ッ プ 型 の パソ コン で は な く 、 ス マー ト フ ォ ン が 対象 で す 。 





IdVS 計 SNSGTWTH 記 に FE に 4 ミ ピ 
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gm 王 ピ TI ロ NI- コ オイ コ mW バイ ブレ ーション 機能 を 使う 


プラ ウザ で index.html を 表示 し 、 ボ タン を クリ ッ ク す る と 、 ボ タン に 応じ て デバ イス が 振動 し ます 。 


耕 sampe 


バイ ブレ ーション ノノ 振動 


し 3 秒 振動 | 3 回 振動 (2 秒 振動 、1 秒 停止 の 繰り 返し ) | 





m ヨ = 上 バハ イブ レー ショ ン 機 能 を 使う に は Vibration API を 使う 


バイ プレ ーション 機能 を 使う に は 、 Vibration API を 使い ます 。 この API は 、「navigator. 
vibrate()」 メ ソ ッ ド を 呼び 出す こと で 利用 で きま す 。 た だ し 、 Firefox で は [navigator 
vibrate()」 と する と 、1 回 、 振 動 す る だ け で す 。 仕様 に 沿っ た 動作 を する の は 「navigator 
mozVibrate() 」 メ ソ ッ ド で 、 パラ メー タ が 数 値 の 場合 、 指定 し た ミリ 秒 だ け 振動 させ ます 。 
「2000」 を 指定 すれ ば 、 2 秒間 、 振動 する こと に な り ま す 。 

パラ メー タ に 配列 を 指定 し た 場合 、 配列 内 の 数 値 に 応じ て 振動 させ ます 。 最初 の 要 
素 が 振動 する ミリ 秒 で 、 次 の 要素 が 振動 を 止め る ミリ 秒 に な り ます 。 配列 要素 の 数 だ け 、 
振動 と 停止 を 繰り 返す こと に な り ま す 。 
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ビ EE ビ TIHN- コ オオ 


バッ テリ ー の 充電 レベ ル を 取得 する 





ここ で は 、 スマ ー ト フォ ン や ノー トト 型 パ ソコ ン な どの バッ テリ ー の 充電 レベ ル を 取得 する 方 法 
に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<tttte>SqmplLe</t1tle> 
<sCcrtpt src="]S/sample .]S "></SCrtDt> 
</head> 
<body> 
<h3> バ ッ テ リ 状態 を 表示 </h3> 
<formW> 
<tnput type="button" vatues" パ バッテリ ー チ ェ ッ ク " td="check"> 
</form> 
<div> 充 電 レ ベル : <output></output></d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .aqddEventLtstener("1ogd" , functton()t 
var ele = document.getELementsByTagName( "output")[9]: 
// パ バッテリー の 状態 を 入れ た オプ ジェ クト を 読み 出し 


var battery = navigator .battery || navtgotor .mozBattery: 





tf (!battery){ エ 

ele .tnnerHTML = "Battery Status API に 対応 し て いま せん ": を : 

1 " 

M 膝 = 

// ボタ ン に イベ ント を 設定 4 
document .getEtementBy1IdC"check").qddEventLtstener("cLtck", functton()t 5 
ele.tnnerHTML = Cbattery.tLevel * 199 ) +"%": 
+。fqtse): の 
+, fatse): 3 
の 
回 団 革 - と 
U 


この 機能 は 、 スマ ー ト フォ ン や タブ レッ ト 、 ノー リコン 0 衣 で か (2 ト 0 も た ツレ で も 情報 
を 取得 する こと は で きる )。 
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WE ビビ TI ロ N- コ オス m バッ テリ ー の 充電 レベ ル を 取得 する 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 現在 の バッ テリ ー の 充電 レベ ル が 
表示 され ます 。 


バッ テリ 状態 を 表示 


充電 レベ ル : 99% 










バッ テリ ー の 充電 レベ ル を 取得 する に は 
「battery」 オ ブ ジ ェクト の 「level」 プロ パテ ィ を 使う 


スマ ー ト フォ ン や ノー ト 型 パソ コン の バッ テリ ー 状 態 に 関す る 情報 は 、「navigator. 
battery」 オ ブ ジ ェクト に 格納 され て いま す 。 ベン ダー プレ フィ ックス 付き で な v と 動作 し な 
い 場 合 も あり ます 。 





IImII に IE 








照 す る こと で 取得 する 
こと が で きま す 。「 1.0] で あれ ば 100% 充 電 、「0.25] な ら 25% と な り ま す 。 





関連 項目 ょ ゅ 





@/ \ ッ テリ ー の 充電 状態 を 取得 する AE きも YY で ます 7 で ツリ 1 の トウ 0 の リー ニン D.8 ] ロ 
@ リ / \ ッ テリ ー の 充電 状態 が 変化 し た ら 処 理 を 行う も 人 の すま た る の を も る すす る すき で きる 店 宮 全 あく は 涼介 演 人: 仙 る D.8 ] 0 
@ リ / い ッ テリ ー レ ベル が 変化 し た 場合 に 処理 する 61 も: あま や な 9 も の の る な る 水生: 居室 ば D.8 ] | 
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避 E ビ ピロ TI ロロ NN - ヨ 人 オ ら 5 
バッ テリ ー の 充電 状態 を 取得 する 


ここ で は 、 スマ ー ト フォ ン や ノー ト 型 パソ コン な どの バッ テリ ー の 充電 状態 を 取得 する 方 法 に 
つい て 解説 し ます 。 


= まや ll 引 寺 mm HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttte>SampLe</t1tle> 
<scrtpt src="]S/sample .]S "></SCr1Dt> 
</head> 
<body> 
<h3> 充 電 状 態 を 表示 </h3> 
<form> 
<tnput type="button" value=" 充 電 状 態 を チェ ッ ク " td="check"> 
</form> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .addEventListener("1oad" 。 functton()t 
var ele = document.getEtementsByTogName( "output")[9]: 
// バッ テリ ー の 状態 を 入れ た オプ ジェ クト を 読み 出し 
var battery = navtgator .battery || navtgator .mozBattery: 
tf (!battery)1{ 
ele.tnnerHTML = "Battery Status API に 対応 し て いま せん ": 
} 
// ボタ ン に イベ ント を 設定 
document .getEtementById("check").aqddEventLtstener("cLtck' , functton(){ 
// 充電 中 か 調べ る 
tf (bgttery .chargtng)t 
ele.innerHTML = "充電 中 で す ": 
+}elset 
ete.innerHTML = "充電 中 し て いま せん ": 
} 
+, false): 
}, false): 


INIIa 量 0 
この 機能 は 、 スマ ー ト フォ ン や タブ レッ ト 、 ノー 9 江 ( が ス ク トッ プリ コン (本 
を 取得 する こと は で きる )。 


に 2 
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ms ヒビ ピロ T| 口 NN - ヨ オイ 5 mw バッ テリ ー の 充電 状態 を 取得 する 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 現在 の バッ テリ ー の 充電 レベ ル が 
表示 され ます 。 充電 中 の 場合 は 、、 次 の よう に 表示 され ます 。 


Sale 


充電 状態 を 表示 





充電 中 で は な い 場 合 は 、 次 の よう に 表示 され ます 。 


ーーmmm ト ーーーー ア ーーーー ーーmーーーmーーmーーーーーーー ボ ーーーー 一 


1 | 肖 Sample 


充電 状態 を 表示 


充電 中 し て いま せん 














バッ テリ ー の 充電 状態 を 取得 する に は 
の [ battery」 オブジェ クト の 「charging」 プロ パテ ィ を 使う 


スマ ー ト フォ ン や ノー ト 型 パソ コン の バッ テリ ー 状 態 に 関す る 情報 は 、[navigator. 
batteryJ オ プ ジ ェ クト に 格納 され て いま す 。 ベン ダー プレ フィ ックス 付き で な いと 動作 し な 
い 場 合 も あり ます 。 

充電 状態 は 、| battery」 オ プ ジ ェ クト の 「charging」 プロ パテ ィ を 参照 する こと で 取得 
する こと が で きま す 。| true] で あれ ば 充電 中 、「false」 で あれ ば 充電 中 で は な いこ と を 示 
し ます 。 









関連 項目 ょ ゅ 
@/ い ソ ッ テ リー の 充 哉 レ ベル を 取得 する 上 本 ビニ …ー…ー ド べべ …(( の (バド ーー ドーーーーー…ー… 0.813 
e バッ テリ ー の 充電 状態 が 変化 し た ら 処 理 を 行う 上 … パ バ (バト ネ ーー オー ニー ント ぬ ハト il 人 ( ヘ ベー ドド ーーー………・ 0p.817 
@/ バ パッ テリ ー レ ベル が 変化 し た 場合 に 処理 する 1 ヨー ビニ トド オト ーーー テ ゆ すし で や ドド …… バ ーーー……ーー……ー… p.819 


=1 コ gglmlNBc と = 
バッ テリ ー の 充電 状態 が 変化 し た ら 処 理 を 行う 


ここ で は 、 スマ ー ト フォ ン や ノー ト 型 パソ コン な どの バッ テリ ー の 充電 状態 が 変化 し た 場合 の 
方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<mmeta charset="utf-8"> 
<tittle>Sqmp Le</t1tle> 


<SCPtDt src="]S/sample.]S "></SCrtDt> 


</head> 
<body> 
<h3> 充 電 状 況 を 監視 </h3> 
<OUtDU キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow . qddEventListener("Load" 。 functton(){ 
var ele = document.getELementsByTagName( "output")[9] : 
// バッ テリ ー の 状態 を 入れ た オプ ジェ クト を 読み 出し 
var bottery = navigator.battery || navtgator .mozBattery: 
tf (!battery)1+ 
ele.innerHTML = "Battery Status API に 対応 し て いま せん ": 
} 
// イベ ント を 設定 
battery .onchargtngchange = functton(){ 
ele.innerHTML = "充電 状態 が 変化 し まし た <br>": 
tf (battery .chargtng){ 
ele.innerHTML += "充電 を 開始 し まし た ": 
+else{ 
ele.innerHTML += "充電 を 終了 し まし た ": 
} 


} 
+。 false): 


HINIF……| 時 人 
この 機能 よ 、 スマートフォン や タブ レッ ト 、 ノ ー ト パソ コン が 対象 で す 。 
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還 ビビ ピロ T1 ロ NN - コ スイ m バッ テリ ー の 充電 状態 が 変化 し た ら 処 理 を 行う 


ブラ ウザ で index.html を 表示 し 、 充電 を 開始 し た り 、 充電 を 停止 し た りす る と 、 メッ セー ジ が 
表示 され ます 。 


田 sme 。 肖 
充電 状況 を 監視 


充電 状態 が 変化 し まし た 
充電 を 開始 し まし た 


充電 状態 が 変化 し た 場合 に 処理 を 行う に は 
ee [chargingchange」 ィ ベン ト を 使う 


パッ テ リ ー が 充電 を 開始 し た 場合 や 、 充 電 を 中 止 し た 場合 に 処理 を 行う に は 、|「charging 
change」 イ ベン ト を 検知 し ます 。| onchargingchange」 プロ パテ ィ に イベ ント ハン ドラ を 設定 
する か 、| addEventListener() 」 メ ノッ ド を 使っ て イベ ント リス ナー と し て 設定 し ます 。 

充電 が 行わ れ た か どう か は 、|charging」 プロ パテ ィ で 調べ る こと が で きま す 。 
| charging] プロ パテ ィ が | true」 な ら 充電 中 、|false」 な ら 充 電 が 中 止 さ れ た (充電 の 
た め の ケ ー ブ ル が 外さ れ た な ど ) こ と に な り ま す 。 


関連 項目 ゅ 





を イベ ント ルン ドラ な を 動 定 す 吉 0・ーー… バ バー バー な r・<3> 9006RP7 2JdRabC3 え と p.396 
@ イベン トス ナー 友 股 定 寺 対 ルル の ロー ルス バー ツバ ババ 44KAGRNR4YAkweVaR 2352 p.398 
e バッ テリ ー の 充電 レベ ル を 取得 する 上 の 聞 = ヵ 有 袖 ……… ド トー ドド ーーーーー p.813 
eS の ナー の 充 馬 状態 大 剛 ッッ p.815 
e バッ テリ ー レ ベル が 変化 し た 場合 に 処理 する ……… 〇 つ つ iii ド ドド ーーーー p.819 
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ED じ DTIUHN- コ 人 オ / 


バッ テリ ー レ ベル が 変化 し た 場合 に 処理 する 





ここ で は 、 スマ ー ト フォ ン や ノー ト 型 パソ コン な どの バッ テリ ー レ ベル が 変化 し た 場合 に 処理 
する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 
<tttte>SampLte</t1 人 le> 
<SCrtpt src="]S/sample . ]S "></SCP1Dt> 
</head> 
<body> 
<h3> 充 電 レ ベル が 変化 し た 場合 に 処理 </h3> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("1oaqd"。 functton(){ 
var ele = document.getEtementsByTagName( "output")[9] : 
// パッ テリ ー の 状態 を 入れ た オブ ジェ クト を 読み 出し 
var battery = navtgator .battery || naqvtgator .mozBoattery: 
tf (!battery){ 
ele.tnnerHTML = "Battery Status API に 対応 し て いま せん ": 
} 





回 回国 回 m 
この 機能 よ 、 ス マー ト フ ォ ン や タブ レッ ト 、 ノー トバ パソ コン が 対象 で す 


// イベ ント を 設定 + 
battery .qddEventListener("Levelchange", functton(){ < = 
// バッ テリ ー レ ベル を 表示 nm E 
var n = battery . Level: 9 3 

ele.innerHTML += "バッ テリ ー レ ベル が 変化 し まし た <br>"+n: コ 

+, faqlse): ー 

JI 

+, faqlse): の 

だ 

の 

他 

の 

アア 

U 
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ms ビビ ピロ T| 口 N - ヨ オプ m バッ テリ ー レ ベル が 変化 し た 場合 に 処理 する 
ブラ ウザ で index.html を 表示 し 、 バッ テリ ー レ ベル が 変化 する と 、 メッ セー ジ と 充電 レベ ル が 
表示 され ます 。 


軸 sanmpe 。 


充電 レベ ル が 変化 し た 場合 に 処理 


バッ テリ ー レ ベル が 変化 し まし た 
0.91 


バッ テリ ー レ ベル が 変化 し た 場合 に 処理 する に は 


Naili 剛 levelchange」 イ ベン ト を 使う 


バッ テリ ー レ ベル (充電 レベ ル ) が 変化 する と 、|levelchange」 イ ベン ト が 発生 し ます 。 
| battery」 オ プ ジ ェ クト の | onlevelchange」 プロ パテ ィ に イベ ント ハン ドラ を 設定 する か 、 
| addEventListener() 」 メ ソ ッ ド を 使っ て イベ ント リス ナー と し て 設定 し ます 。 

また 、 バッ テリ ー レ ベル は 、「 battery」 オ プ ジ ェ クト の 「level」 プロ パテ ィ を 参照 する こと 
で 取得 する こと が で きま す 。 


関連 項目 ょ ゅ 








生か です PPP た と DS か た p.396 
2 和 00S) 人 まお UaekrrrteAuos2kktSNRRS2 SSRREBRSRRG5E8H p.398 
e バッ テリ ー の 充電 レベ ル を 取得 する (iiireoeoooeoeiritito D.813 
e バッ テリ ー の 充電 状態 を 取得 する … ぬ ひ つの …… ド ドド ーー D.815 
e バッ テリ ー の 充電 状態 が 変化 し た ら 処理 を 行う 上 …… 上 上 … 上 (人 … ド ーー ドーーーー p.817 


ご = 純 側 半田 有 NE に きす ニー 
ゲー ム バ ッ ド が 使用 可能 か 調べ る 


ここ で は 、 プ ラウ ザ で 利用 で きる ゲー ム パ ッ ド が 使用 可能 か 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metq charset="utf-8"> 
<tttle>SqmpLe</t1tle> 
<SCrtDt src="]S/sample.]S"></sCrtDt> 

</heqd> 

<body> 
<h3> ゲ ー ム パッ ド が 使用 で きる か 調べ る </h3> 
<OUtDut></OutDUt> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow. addEventLtstener( "Logd" 、 functton()+ 
var ele = document.getElLementsByTagName( "output")[9] : 
// GamePqd オ プ ジ ェ クト CGoogle Chrome の 場合 ) 
navitgator . gamepads = navtgator.gamepads || navtgator .webkttGamepads : 
// ゲー ム パ ッ ド が 使用 で きる か 調べ る 
tf (navtgator . gamepads)†+ 
// 使用 可能 な 場合 の 処理 
ele.tnnerHTML = "ゲー ム パ ッ ド は 使用 で きま す 。 <br>": 





// 接続 され て いる パッ ド の 数 を 取得 ロ 
var n = navtgator . gamepads . Length: ン 
ele.innerHTML += "接続 数 :"+n: コミ 
円 = 
+elset - 
ele.tnnerHTML = "ゲー ム パ ッ ド は 接続 され て いま せん ": エ 
ミ 
}, fatse): の 
ト 3 
の 
他 
の 
アア 
U 
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き ビ ピ T[ 口 NN - コ 2 日 m ゲー ム パ ッ ド が 使用 可能 か 調べ る 


プラ ウザ で index.html を 表示 する と 、 ゲー ム パ ッ ド が 利用 可能 な 場合 は 、 そ の 旨 メ ッ セ ー ジ 
と ゲー ム パ ッ ド の 接続 数 が 表示 きれ ます 。 


展 Sample 
~ ap 王 較 和 


ee we ーー ニー ヤー 年 は 表 


ケー ム パ ッ ド が 使用 で きる か 調べ る 
ゲー ム バ パッド は 使用 で きま す 。 
接続 数 :4 


ms に ia 下 ゲ ー ム バッ ド を 使用 可能 か 調べ る に は 「gamepads」 オ ブ ジ ェクト を 使う 


ゲー ム パ ッ ド を 利用 する に は 、|navigator」 オ ブ プ ジ ェ クト の [| gamepads」 オ プ ジ ェ クト の 
有無 を 調べ ます 。| gamepads」 オ プ ブ ジェ クト が あれ ば 利用 可能 、 そう で な けれ ば 利用 で 
き な い こと に な り ま す 。 | gamepads」 オ プ ジ ェ クト に は 、 それ ぞ れ 接続 され た ゲー ム パ ッ ド 
の オプ ジェ クト が 配列 で 格納 さん て いま す 。 この た め 、「gamepads[0] 」 と する と 、 接続 き 
れ て いる ゲー ム パ ッ ド その 1 の 情報 に アク セス する こと が で きま す 。 


に 誠 | の の 二 A9 ジ FRCO 寺 年 
0 | ゴン が 992 拉 明 YY 1 ム 
timestamp 


ボタ ン ( 配 列 の 数 王 入力 可能 な ボタ ン 数 ) 


ステ ィ ッ ク の 人 入力 方 向 を 示す 配列 


miml 下 に 較 ゲー ハム バッ ド を 有効 に する に は 


Google Chrome 21 で は 、| gamepads」 オ プ ジ ェ クト は 「 webkitGamepads」 オ ブ ジ ェ 
クト に な っ て いま す 。 また 、 デフ ォ ル ト で は ゲー ム パ ッ ド は 使用 で き な い よう に な っ て いる た 
め 、 アド レス バー に | about:Hags」 と 入力 し 、 表示 され る 設定 画面 で ゲー ム パ ッ ド を 有効 
に する 必要 が あり ます 。 


関連 項目 ょ ゅ 


ゅ バイ ブレ ーション 枝 能 を 合う の お 234 SUMMKURMSMN2SRMRUUG242V2 あ 4720 p.81 1 


LIE6 1 Chrome 1 Safari 5 | Firefox 4 』 Opera11 LAndroid 4 ! WP 」 


EDUDTIUHN- コ 人 オラ 


要素 内 の 文字 を 編集 可能 に する 


ここ で は 、 ペー ジ 内 に 表示 され て いる 要素 内 の 文字 を 編集 可能 に する 方 法 に つい て 解説 
し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<mietq charset="utf-8"> 
<tttle>Sqmp Le</t1t1e> 
<SCrtDt src="]S/sqmple .]S"></SCrtDt> 
</head> 
<body> 
<h3> テ キス ト 編 集 </h3> 
<div td="edttArea"> 祇 園 精舎 の 鐘 の 声 <br><b> 諸 行 無常 </b> の 響き あり <br> 
沙 難 双 樹 の 花 の 色 <br> 盛 者 必 表 の 理 を あら わす <br> お ご れる 人 も 久 し か ら ず <br> 
た だ 春の 世 の 夢 の ご と し <br> た け き 者 も 遂に は 減 び ぬ <br> 偏 に 風 の 前 の 塵 に 同じ 
</d1V> 
<for> 
<tnput type="button" value=" 編 集 可能 に する "1id="startEdit"> 
<tnput type="button" value=" 編 集 を 禁止 する " id="endEdit"> 
</form> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("tLoqd" 。 functton()1 
// 編集 可能 領域 
var edit = documernt.getELementById("edttAreq"): 
// 編集 可能 ボタ ン に イベ ント を 設定 
document .getEtementById(" startEd1t").addEventLtstener("clitck", functton(){ 





et. ContentEdttoble = tPue: 
}, false): 
// 編集 禁止 ボタ ン に イベ ント を 設定 
document.getE1ementById("endEd1t").qddEventLtstener("cLtck"。 functton(){ 
edit.contentEdttoable = foalse: 
+,。 fatse): 
+, faqlse): 


IdV 計 GrNGGT]W 和 TH EE に 4 ミ に | 


823 


mW 王 ビ ヒ ピ TI 口 N - コ オオ 9 mW 要素 内 の 文字 を 編集 可能 に する 


プラ ウザ で index.html を 表示 し 、「 編 集 可能 に する ] ボ タン を クリ ッ ク する と 、 指定 し た 要素 
の 文字 が 編集 可能 に な り ます 。 


テキ スト 編集 


避 園 精舎 の 簡 の 声 
諸 行 無常 の 響き あり 


沙 密 双 樹 の 花 の 双 

盛 者 必 表 の 理 を あら わす 
お ご れる 人 も 久 し か ら ず 
た だ 春の 世 の 夢 の ご と し 
た け き 者 も 遂に は 減 び 必 
偏 に 風 の 前 の 塵 に 同じ 





文字 を 追加 ・ 削 除 し た 後に | 編集 を 禁止 する ] ボ タン を クリ ッ ク す る と 、 編 集 が で き な く な り ま す 。 


テキ スト 編集 
移 園 精舎 の 鐘 の 声 
の 敗 き あり 


沙 比 双 樹 の 花 の 双 

盛 者 必 表 の 理 を あら わす 

お これ る 人 も た だ 春の 世 の 夢 の ご と し 
偏 に 風 の 前 の 塵 に 司 じ 


電信 可 能 に する | 編入 を 革 止 する 





要素 内 の 文字 や 画像 を 編集 する に は 
本 「contentEditable」 プロ バテ ィ を 使う 


要素 内 の 文字 や 画像 を 編集 する に は 、 要素 の 「contentEditable」 プ ロ パ ティ に [true」 
を 指定 し ます 。| true」 を 指定 する と 、 その 要素 内 に ある 文字 や 画像 は 編集 可能 に な り 、 
文字 の 追加 や 削除 が 可能 に な り ま す 。 また 、 子 要素 や 子孫 要素 も 、 親 要素 と 同様 に 編集 
可能 に な り ま す 。 

また 、 スク リプ ト で [| contentEditable」 プロ パテ ィ を 操作 する 方 法 以 外 に 、 要素 に 
| contenteditable」 属 性 を 指定 し て も 、 編集 が 可能 に な り ま す 。 
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LIE 10 1 Chrome 』 Safari 5 」 Firefox 14 ) LiOS4 」 





本 も 4LJ サ NL 


WebSocket が 使用 可能 か 調べ る 





ここ で は 、 サー バー と ソケット 通信 が で きる WebSocket が 使用 可能 か 調べ る 方 法 に つい て 
解 詞 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<heqd> 
<meto charset="utf-8"> 
<ttt1e>SampLe</t1tle> 
<SCrtDt src="]S/sample .]S"></SCr1Dt> 
</head> 
<body> 
<h3>WebSocket が 使用 で きる か 調べ る </h3> 
<OUtDu キ ></OUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


window.addEventLtstener("1oad" functton()+ 
var ele = document.getEtementsByTagName( "output")[9] : 
// WebSocket オ ブ ジ ェクト が 使用 で きる か 調べ る 
tf (wtndow.WebSocket){ 
// 使用 可能 な 場合 の 処理 
ele.innerHTML = "WebSocket は 使用 で きま す 。 ": 
}else{ 
ete.innerHTML = "WebSocket は 使用 で きま せん ": 
} 
}, faqlse): 





ブラ ウザ で index.html を 表示 する と 、 WebSocket が 使用 で きる 場合 は 、 次 の よう に 表示 さ 
れ ま す 。 


IdVS 計 GrNGG]W 和 TH 記 た TEE に 4 


WebSocket が 使用 で きる か 調べ る 


WebSocket( は 使用 で きま す 。 
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mm 選 ビ ロイ T エ 1 ロト NN - コ 5 口 mW WebSocket が 使用 可能 か 調べ る 


WebSocket が 使用 で き な い 場合 は 、 次 の よう に 表示 され ます 。 
WebSocket が 使用 で きる か 調べ る 


WebSocket は 使用 で きま せん , 


WebSocket が 利用 で きる か どう か は 
0 「WebSocket」 オブ ジェ クト の 有無 を 調べ る 


JavaScript で は 、 サー バー と 通信 する 手段 が いく つか 用 意 さ れ て いま す 。 多く 利用 き 


れ て いる の が 、 非同期 通信 を 使っ た も の で す 。 これ は 、「XMLHttpRequest」 オプ ジ ェ ク 
ト を 利用 し て 通信 を 行い ます 。 た だ し 、 チャ ッ ト や ゲー ム な ど で リ アル タイ ム に デー タ を や り 
取り する 用 途 に は 向い て いま せん 。 

リア ル タ イ ム に サー バー と や り 取 りす る 方 法 と し て 、WebSocket が あり ます 。 WebSocket 
は 、 その 名 の 通り 、 ソケット 通信 を 行い ます 。 これ は サー バー と クラ イア ント 側 双 方 向 で 通 
信 が で きる た め 、 チャ ッ ト や ゲー ム に 利用 する に は 便利 で す 。 

WebSocket が 使え る か どう か は 、「window」 オブ ジェ クト 内 に 「WebSocket | オプ 
ジェ クト が ある か どう か を 調べ ます 。 な お 、「 WebSocket」 オブ ジェ クト が な い 場 合 は 、 
| undefined」 に な り ま す 。 


関連 項目 
@ WebSocket で サー/ 【 一 に 接続 する て ザー D.82 ア 
3 WebSocket を 使っ て サー リ トー と デー タ を や り 取 りす る が 06: る が の p.829 





りつ 
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LIE 10 | Chrome 』 Safari 5 1 Firefox 11_ 





Lo も JN に は 5 | 


WebSocket で サー バー に 接続 する 





ここ で は 、 WebSocket で サー バー に 接続 する 方 法 に つい て 解説 し ます 。 


= まや 中 引 需 引 =lm】 HTML の コー ド (index.html) 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>SampLe</tttle> 
<scrtpt src="]S/sqmple.]S "></SCrtDt> 
</head> 
<body> 
<h3>WebSocket で 接続 する </h3> 
<OUtDut></Out て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("1oad", function()t 
var ele = document .getEtementsByTagName("output") う [9]: 
// WebSocket オ プ ジ ェ クト を 生成 する 
var ws = new WebSocket( "ws ://192 .168 .11 .1:9991" ): 
// 接続 状態 を 確認 
var msg = [" 接 続 中 ", "接続 済み ", "切断 中 ", "切断 され た "]: 
// 接続 状態 を 表示 する 
ele.tnnerHTML = "ステ ー タ ス :"+msg[ws . readyState] : 
}, false): 





ブラ ウザ で index.html を 表示 する と 、 WebSocket で サー バー に 接続 中 の 場合 は 、 次 の よう 
に 表示 され ます 。 


WebSocket で 接続 する 
ステ ー タ ス : 接続 中 


IdVS 計 GrNGGTWTH 記 に FE に 4 ミ e 





82/ 
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生 ビビ ロ イエ | 口 N - コ 5 ] mw WebSocket で サー バー に 接続 する 


= ヨコ = 中 サー バー に 接続 する に は 「new WebSocket() 」 と する 


WebSocket で サー バー に 接続 する に は 、「new WebSocket () 」 と し て 、 パラ メー タ 
に 接続 先 の サー バー を 指定 し ます 。 この と き に は 、「http://」 で は な く 、「ws:// | を 使い 
ます 。 デー タ を 暗号 し て セキ ュ ア な 通信 を 行う 場合 に は 、[wss://」 を 指定 し ます 。 また 、 
| 192.168.11.1:4649」 の よう に ポー ト 番 号 を 指定 する こと も で きま す 。 他 に も 、「WebSocket 
()」 の 2 番目 の パラ メー タ に サブ ププ ロト コル を 指定 する こと も で きま す 。 

サー バー と の 接続 状況 は 、「 WebSocket」 オブジェ クト の 「readState」 プロ パテ ィ で 確 
認 す る こと が で きま す 。「readState」 プ ロ パ ティ と 状態 の 関係 は 、 次 の 表 の よう に な り ま す 。 


接続 











し 値 
| 0 | CONNECTING | 接続 中 
| 1 | OPEN | 接続 清 み 


また 、 サー バー と の 接続 が 確立 され る と 、「open」 イ ベン ト が 発生 し ます 。 イベ ント 処理 
に 関し て は 、 396 ペ ー ジ や 398 ペ ー ジ を 参照 し て くだ さい 。 








関連 項目 ゅ 「 | 0 | 
* WebSocket が 使用 可能 か 調べ る …………………… YWEC4266 40Ge の ・p.825 
e WebSocket を 使っ て サー バー と デー タ を や り 取 りす る 上 上 … ひ バ パ t に … ド バド に … ド ーーーーーーーー……ーー p.829 





LIE 10 | Chrome 1 Safari 5 | Firefox 11 


も ERM こ の 2 の 


WebSocket を 使っ て 
サー バー と デー タタ を や り 取 りす る 


ここ で は 、 WebSocket で サー バー と デー タ を や り 取 りす る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<hegd> 
<meta charset="utf-8"> 
<tttle>SampLe</t1tle> 
<Scrtpt src="]S/sample.]S "></SCrtDpt> 
</head> 
<body> 
<h3> デ ー タ を 送受 信 す る </h3> 
<formW> 
文字 :<input type="text" vatue="Furuhata" 1d="uNome "><br> 
<input type="button" vatue=" デ ー タ 送信 "1d="check"> 
</form> 
<OUtDu キ ></OuUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window . addEventListener("1oad" 。 function(){ 
var ele = document .getEtementsByTagName( "output")[9]: 
// WebSocket オ プ ジ ェ クト を 生成 する 
var ws = new WebSocket( "ws ://192.168 .11.1:9992"): 
// 受信 し た デー タ を 表示 
ws .onmessage = functton(msg)+ 
ele.innerHTML += "サー バー か ら :"+msg.data+"<br>": 
} 
// 接続 時 の サー バー が か がら の メッ セー ジ を 表示 
ws .onopen = functton(datoa){ 
ele.tnnerHTML = "接続 完了 イベ ント 発生 <br>": 
} 
document .getEtementByTd("check").addEventLitstener("clLtck"。functton(){ 
// フォ ー ム に 入力 し た 文字 を 読み 出す 
var text = document.getElementByTd("uName").value: 
// サー バー に 入力 し た 文字 を 送信 
WS . Send(textt): 
}。 fatse): 
+,。 false): 
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サー バー 側 の コー ド (ws.js) 
Var WS = requtre( "websocket-server' ): 
// サー バー 生成 
Var Server = WS.CreateServer( ): 
// 接続 時 の イベ ント 
server .qddLtstener('connectton' ,function(conn)# 
// 接続 時 に メッ セー ジ を 送信 
conn. send( "Connect OK"): 
console.log("Connect. ...... し 
// メッ セー ジ 受 信 時 の イベ ント 
conn .qddLtstener( "messaqge ' , functtonCmessqge){ 
// メッ セー ジ を 送信 
conn.send("Length = "+message. Length): 
console.log("Send data"): 
} う : 
}): 
Server.ltsten(9992): 


HINI TI PT RE: た お EE 
: サー バー 側 に は 、 node.jS を 利用 し て いま す 。 


サー バー 側 で wsjs を 実行 し た 後に 、 ブラ ウザ で index.html を 表示 し て サー バー に 接続 す 
る と 、 サー バー か ら の メッ セー ジ が 表示 され ます 。 


ー タ を 送受 信 す る 


3 の を ・ Furuhata 


「 デー な 送信 . 
接続 守 了 イベ ント 発生 
サー バー か いら : Comnect OK 





テキ スト フィ ー ル ド に 文字 を 入力 し 、| デー タ 送 信 」 ボ タン を クリ ッ ク す る と 、 文字 が サー バー に 
送信 され ます 。 その 後 、 文字 の 長き を 計 算 し た 結果 が サー バー か ら 返 され 、 表示 され ます 。 
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ファ イル 編集 表示 居 歴 ブッ クマ ー ク 開発 ウィ ンド ウ へ 
証 重い mpywwo で Br 代 ・ 


| デー タ を 送受 信 す る 









拉 述 完了 イベ ント 発生 
サー バー か ら : Comnnect OK 
サー バー か ら :Length = 8 














欄 守 完了 イベ ント 発生 
サー バー か ら : Connect OK 
サー バー か ら :Lengtb = 8 
サー バ パー か ら :Length = 9 


mml に 下 サー バー と や り 取 りす る に は メッ セー シ ジ 送 信 を 使う 


WebSocket を 使っ て サー バー と や り 取 りす る に は 、 メッ セー ジ 送 信 を 使っ て 行い ます 。 
サー バー か ら 接 続 さ れ た 場合 や デー タ が 送信 され る と 、 クラ イア ント 側 に は | message」 イ 
ベン ト が 発生 し ます 。 クラ イア ント 側 で は 、「 WebSocket」 オプ ジェ クト の | onmessage」 プ 
ロ パ ティ に イベ ント ハン ドラ を 設定 する か 、「 addEventListener() 」 メ ソ ッ ド を 使っ て イベ ン 
トリ スナ ー を 使っ て 設定 し ます 。 


イベ ント ハン ドラ に は 、 サー バー か ら 送 信 さ れ た デー タ を 格納 し た オブ ジェ クト が 渡る れ ま 
す 。 こ の オブ ジェ クト の |「 data」 プロパ ティ に サー バー か ら 送 信 さ れ た メッ セー ジ が 人 り ま す 。 
クラ イア ント 側 か ら サ ー バ ー に デ erF 電 タ キ ロ | WebSocket」 オ プ ジ ェ クト の 
「send() 」 メ ノッ ド を 使い ます 。 パラ メー タ に は 、 送信 する デー タ ( テ キス ト デ ー タ ) を 指定 
し ます 。 
サー バー 側 で 処理 し た 結果 が 返さ れ た 場合 、| message」 イ ベン ト が 発生 する の で 、 
状況 に 応じ て 処理 を 行い ます 。 





miml 問 連 に 上 較 NOOG.jIS と は 


Node.js と は 、 PHP の よう に サー バー 側 で 動作 する プロ グラ ム で す 。 特長 と し て は サー 
バー 側 の プロ グラ ム を TavaScript で 記述 で きる こと で す 。 Nodejs で WebSockets を 使用 
する 場合 は 、 exprerss や websocket-server(Node WebSocket Server) な ど を 追加 
イン スト ー ル する 必要 が あり ます 。 Nodejs に つい て は 、 次 の ペー ジ を 参照 し て くだ さい 。 
http://nodejS.Org/ 
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mal 引 IIN 開 サン プル の 動作 に つい て 


サン プル の 動作 に つい て は 、 サー バー 側 と クラ イア ント 側 で プロ トコ ル の バー ジョ ン 
が 同じ で な いと 、 正しく 動作 し ませ ん 。 プロ ロコ ル の バー ジョ ン が 異な る と 、 た と えば 、 
Windows で Node.js を 準備 し た 場合 、 プラ ウザ で index.html を 表示 する と コマ ンド プロ 
ンプ ト 上 に | Connect.…」 と 表示 は され ます が 、 ブラ ウザ (クラ イア ント ) に メッ セー ジ が 表 
示さ れ ま せん 。 

サン ブル で は websocketserver(Node WebSocket Server) を 前 提 と し て いま す が 、 
2012 年 7 月 現在 、 Node Package Manager を 使い 、「npm install websocket-server | と 
し て イン スト ー ル し た 場合 は 、 古い バー ジョ ン 76 の プロ トコ ル に 対応 し て いる Safari 5 や iOS な 
ど で し か 正しく 動作 し ませ ん 。 新しい バー ジョ ン の プロ トコ ル を サポ ー ト し て いる ブラ ウザ 上 で 
動作 させ る 場合 は 、 次 の URL に アク セス し 、「Download as zip」 ボ タン を クリ ッ ク し て ファ イル 
を ダウ ン ロ ー ド し 、 解凍 後 の 中 身 を イン スト ー ル 済み の websocket-server と 入れ 禁 え ます 。 
そう する こと で 、 Google Chrome 21 や Safari 6、 IE10 で も 動作 する よう に な り ま す (た だ し 、 
Firefox 14 で は 動作 し な い )。 な お 、 websocket-server は 、 Windows 7 で Nodejs を イン ス 
トー ル し て いる 場合 は 1C:\Users\< ユ ー ザ ー 名 >\node_modules\websocket-server | 
に イン スト ー ル され て いる の で 、| websocket-server」 の 中 身 を 入れ 替え て くだ さい 。 
https://githuD.com/VanCoding/node-websocket-server/downloads 


関連 項目 ょ ゅ 


e WebSocket が 使用 可能 か 調べ 。 
びす WWSDSOCKGEC す いで HI 較 導い の 全 0 が Ya の heP50。AAe2K2KNTCKS22eue p.82 フ 7 
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LChrome_ 





ET ILLTIN- う は つう 
Indexed Database が 使用 可能 か 調べ 


ここ で は 、 クラ イア ント 側 で デー タベース が 使用 可能 か 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<meta charset="utf-8"> 
<tttle>Sample</t1tle> 
<SCrtpt src="]S/sample .]S "></SCr1Dt> 
</head> 
<body> 
<h3>Indexed DB が 使用 で きる か 調べ る </h3> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("Load",。 functton(){ 
var ele = document.getEtementsByTagName( "output")[9] : 
// Indexed DB オプ ジェ クト が 使用 で きる か 調べ る 


var db = wtndow.1ndexedDB || wtndow.webkttIndexedDB || wtndow.mozTndexedDB: 


tf(db){ 
ele.tnnerHTML = "Tndexed Database は 使用 で きま す ": 
+else{ 
ele.innerHTML = "Indexed Datqbase は 使用 で きま せん ": 
} 
+, false): 





HI 
Firefox で も Indexed Database を サポ ー ト し て いま す が 、 本 書 の サン プル は 動作 し ませ ん 。 


ば NNwNNN や 43NNP や NN や NNNNTNN や NNNNT ド 1NNNW3NNNNN コ や で や NNNNNNWN や WNW や NNW や ボネ や ポポ ポポ や NNNNNWNNNNNNNNNNWNWNNNYNN ド FN1NNNNNNNWNNNWWT で NN や NNTWNTWYG や NNNNYYNNWNWNNNNNNWNWNNN や WNWWT や NNNNmWN や WS ギ キネ で ネネ ドド ネ 4 


ブラ ウザ で index.html を 表示 する と 、 Indexed Database が 使用 で きる 場合 は 、 次 の よう に 
表示 され ます 。 
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Indexed Database が 使用 で き な い 場合 は 、 次 の よう に 表示 され ます 。 


Imdexed DB が 使用 で きる か 調べ る 
Indexed Database は 使用 で きま せん , 


ロロ NEPHINT 


Indexed Database が 使用 で きる か どう か が は 
「IndexedDB」 オブ ジェ クト の 有無 を 調べ る 


デー タベース は サー バー 側 で 持つ の が 一 般 的 で す 。 デー タベース は 、 SQL を 利用 し た 
ゃ も の か 、KVS(Key Value Store) を 利用 し て いま す 。 HTML5 で は 、 ク ライ アン ト 側 の デー 
タベース と し て 、 Imdexed Database を 定義 し て いま す 。 これ は SQL で は な く 、 KV 方 式 


で デー タ を 格納 する タイ プ で す 。 以前 は SQL し を ベー ス に し た Web SQL が あり まし た が 、 
現在 で は 仕様 か ら 外 され て いま す 。 た だ し 、iOS 5 や Android 4 まで は 利用 する こと が 可 
能 で す 。 

Indexed Database が 使用 で きる か どう か は 、|「 window」 オ ブ ジ ェクト 内 に 「IndexedDB」 
オプ ジェ クト が ある か どう か を 調べ ます 。「IndexedDB」 オブ ジェ クト が な い 場 合 は 、 
| undefined」 が 返さ れ ま す 。 な お 、 2012 年 7 月 時 点 で は ベン ダー プレ フィ ックス を 付け な いと 
利用 で きま せん 。 この た め 、| IDBTransacton」 オ ブ プ ジ ェ クト や 「IDBKeyRange 」 オ プ ジ ェ ク 
ト や 、 次 の よう に 記述 する 必要 が あり ます 。 





var TDBTransactton = 








- wtndow.IDBTrgnsactton || wtndow.webkttTDBTransactton || witndow.mozTDBTrgnsactton : 

上 < var IDBKeyRagnge = 
n wtndow . ITDBKeyRagnge || wtndow.webkttIDBKeyRange || wtndow.mozIDBKeyRange: 
コ 
関連 項目 
の e Indexed Database で デー タベース を 開く ーー ドド ーー ドー 0D.835 
3 e Indexed Database で オブ ジェ クト スト ア を 作成 する ……………… ド ーーー ドー p.837 
e Indexed DataDase に デー タ を 書き 込む DO 2 AR p.84 1 
に * Indexed Database か ら デ ー タ を 読み 出す …… 0338 いく p.845 
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Indexed Database で デー タベース を 開く 


ここ で は 、 Indexed Database で デー タベース を 開く 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>Sample</t1tle> 
<SCP1Dt src="]S/sample.]S"></SCPtDt> 
</head> 
<body> 
<h3> デ ー タ ベー ス を 開く </h3> 
<OUtDu キ ></OUt て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.aqddEventLtstener("1oqgd"。 functton()t 
var ele = document .getElementsByTagName( "output")[9] : 
// Indexed DB オブ ジェ クト が 使用 で きる か 調べ る 
var db = window.1tndexedDB || wtndow.webkitTndexedDB || wtndow.mozITndexedDB: 
tf(!db){ 
ete.tnnerHTML = "Lndexed Databgse は 使用 で きま せん ": 
Peturn: 
} 
// デー タベース を 開く (も し く は 新規 作成 )。 デー タベース パー ジョ ン は 1 
var req = db.open( "testDB991" , 1): 
// デー タベース の オー プン に 成功 し た と き の 処 理 
req.OnSsuccesSs = functton(evt)1 
// 開い た デー タベース を 取得 CIDBDatabase オ プ ジ ェ クト ) 
var myDB = thts .result: 
// 結果 を 表示 
ele.tnnerHTML = "デー タベース を オー プン し まし た <br>": 
ele.tnnerHTML += "デー タベース 名 : "+myDB .name+"<br>": 





ele.tnnerHTML += "バー ジョ ン :"+myDB .verston: 
} 
// デー タベース の オー プン に 失敗 し た と き の 処 理 
req.Oonerror = functton(Cevt){ 
ele.innerHTML = "デー タベース の オー プン に 失敗 し まし た ": 
} 
+, faqlse): 
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ブラ ウザ で index.html を 表示 し 、 デー タベース が 正常 に 開く こと が で きた 場合 は 、 デー タ 
ベー ス 名 と バー ジョ ン 名 が 表示 され ます 。 


ー タ ペー ス を オー ブン し まし た 
ーー タベース 名 : testDBO001 
パ バー ジ ション: 


ア 
ン 


Indexed DataDase で デー タベース を 開く に は 
「open()」 メソッド を 使う 


Indexed Database で デー タベース を 開く に は 、| IndexedDB」 オブジェ クト の [open 
()」 メ ノッ ド を 使い ます 。「open (0 」 メ ソ ッ ド の 最初 の パラ メー タ に 、 開く (また は 新規 に 
作成 する ) デ ー タ ベー ス 名 を 指定 し ます 。2 番 目 の パ ラメ ー タ に は 、 デ ー タ ベー ス の バー ジョ 
ン 番 号 を 指定 し ます 。 

指定 し た デー タベース が 開か れ た 場合 、「success」 イ ベン ト が 発生 し ます 。 イベ ント ハ 
ンド ラ に は イベ ント オプ ジェ クト が 渡さ れ 、|「 result」 プロパ ティ に は 「resultIDBDatabase」 
(デー タベース ) オブ ジェ クト が 渡さ れ ま す 。「resultIDBDatabase」] オブ ジェ クト の 
| name」 プロ パテ ィ に 開い た デー タベース 名 、| version」 プロ パテ ィ に デー タベース の 
バー ジョ ン が 和信 り ます 。 

デー タベース を 開く こと が で き な か っ た 場合 な ど 、 エラ ー が 発生 し た と き に は 「error」 イ 
ベン ト が 発生 し ます 。 


ロロ NEPHINT 








[] 
上 
p 
EE 
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Indexed DataDase で 
オブ ジェ クト スト ア を 作成 する 


ここ で は 、 実際 に デー タ を 格納 する オプ ジェ クト スト ア を 作成 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metq charset="utf-8"> 
<tttle>SqmpLe</t1ttLe> 
<SCrtDt src="]S/Sample.]S"></SCr1Dt> 
</head> 
<body> 
<h3> オ プ ジ ェ クト スト ア を 作成 / 削 除 す る </h3> 
<forr> 
<tnput type="button" vaqlue="DB 作 成 " id="createDB"> 
<input type="button" vatue="DB 削 除 " 1d="deteteDB"> 
</form> 
< く OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow . addEventLtstener("Load" 。 functton()1{ 
var ele = document .getELementsByTagName("output")[9]: 
// Indexed DB オプ ジェ クト が 使用 で きる か 調べ る 
var db = wtndow.1ndexedDB || wtndow.webkttTndexedDB || wtndow.mozIndexedDB : 
if(!db){ 
ele.tnnerHTML = "Indexed Database は 使用 で きま せん ": 


Peturn: 


| 


} 
// DB 作成 の ボタ ン に イベ ント を 割り 当 で る 
document . getEtementByIdC"createDB") .addEventLitstener("cLtck",。 functton(){ 
// デー タベース パー ジョ ン を 変数 に 入れ て お く 
var dbVer = 1: 
// デー タベース を 開く (も し く は 新規 作成 )。 デー タベース バー ジョ ン は 1 
var req = db.open( "testDB991" 。 dbVer): 
// デー タベース の オー プン に 成功 し た と き の 処 理 
req.OnSucceSsSs = functton(evt){ 
ele.tnnerHTML = "デー タベース を オー プン し まし た <br>": 
var myDB = thts.result: 





IdV 〇 計ら G ]W1H 記 丘 TEE4EE」 


ele.innerHTML += "デー タベース 名 : "+myDB .name+"<br>": 

ele.itnnerHTML += "バー ジョ ン :"+myDB .verston+"<br>": 

パー ジョ ンチ テ チェック 

tf (myDB.version != dbVer)t K4 
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// 新た な バー ジョ ン を 設定 マ 
var setVerston = myDB.setVerston(dbVer): 

// バー ジョ ン 設 定 に 成功 し た 場合 

setVerston.OnSuccess = functton()+ 


// オプ ジェ クト スト ア を 作成 。 キー は 自動 イン クリ メン ト 


try{t 
var ob]Store = myDB.createOb]ectStore( "memo"): 

+catch(e){ 
ele.tnnerHTML += "すでに オプ ジェ クト スト ア が あり ます 。 削除 し て か ら 実 行 し て くだ さい ": 
Peturn: 

} 


elte.innerHTML += "オプ ジェ クト スト ア の 作成 に 成功 し まし た <br>": 
ele.tnnerHTML += "新た な デー タベース バー ジョ ン :"+myDB .verston+"<br>": 


} 
+elset 
ete.innerHTML += "オプ ジェ クト スト ア は すでに 作成 済み で す ": 


} 
} 
// デー タベース の オー プン に 失敗 し た と き の 処理 
req.Onerror = functton(evt){ 
etle.tnnerHTML = "デー タベース の オー プン に 失敗 し まし た ": 
} 
+, faqtse): 
// DB 削除 の ボタ ン に イベ ント を 割り 当て る 
documernt .getElLementById("deleteDB" ) .qddEventListener("cLtck"。function(){ 
db .deleteDatabase( "testDB991"): 
ele.tnnerHTML += "デー タベース を 削除 し まし た ": 
+, fatse): 
+。 fatse): 


ブラ ウザ で index.html を 表示 し 、| DB 作成 」 ボ タン を クリ ッ ク す る と 、 オブ ジェ クト スト ア が 作 
成 さ れ ま す (オプ ジェ クト スト ア が 作成 され て いな い 初 回 の 場合 )。 





オブ ジェ クト スト ア を 作成 / 削 除 する 


.DB 作 成 | DB 前 除 . 
ー 秋 ベー ス を オー プン し まし た 
ーー タベース 名 :testDBO01 
ハバ ーション : 
オプ ジェ クト スト ア の 作成 に 成功 し まし た 
は デー の ペー ズリ ペー ジョ ラン 1 


LngeWe 
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オプ ジェ クト スト ア 作 成 後に 「DB 作 成 」 ボ タン を クリ ッ ク す る と 、 作 成 済 みな で ある と 表示 され ます 。 
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オブ ジェ クト スト ア を 作成 / 削 除 す る 


デー タベース を オー プン し まし た 
テー タベース 名 :testDBO01 


ハー ション:1 と 
オブ ジェ クト スト ア は すでに 作成 済み で す 





デー タベース バー ジョ ン を 変更 し て か ら 再 度 、 ペー ジ を 読み 込み 、| DB 作成 」 ボ タン を クリ ッ 
ク す る と 、 削除 し て か ら 実 行 す る よう に 表示 され ます 。 


オブ ジェ クト スト ア を 作成 / 削 除 す る 


デー タベース を オー プン し まし た 

デー タベース 名 :testDBOO1 

し ジル 9 ) も 
すでに オプ ジェ クト スト ア が あり ます 。 削除 し て か ら 実 
行 し て くだ さい 





「 DB 削除 」 ボ タン を クリ ッ ク す る と 、 デー タベース が 削除 され ます 。 





0 
ャ ーー 


デ 


タベース を 削除 し まし た 





IdVS 詩 NGSGTWTH 計 丘 EE に 4 ミ ピ 
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「createObjectStore()」 メソッド を 使う 

実際 に デー タ を 格納 する 領域 で ある オプ ジェ クト スト ア を 作成 する に は 、 デー タベース 
が 正常 に 開か れ た 後に 行い ます 。 オブ ジェ クト スト ア を 作成 する 場合 、 デ ー タ ベー ス の 
バー ジョ ン 番 号 を 変更 し た 後に 呼び 出さ れる イベ ント ハン ドラ 内 で 行い ます 。 イベ ント ハン 
ドラ 内 で は 、| createObjectStore() 」 メ ソ ッ ド を 使い ます 。「createObjectStore()」 メ 
ソ ッ ド の パラ メー タ に は 、 オプ ジェ クト スト ア の 名 前 を 指定 し ます 。 また 、 2 番目 以降 の パラ 
メー タ も あり ます が 、 省略 する こと が で きま す 。 2 番目 の パラ メー タ は オブ ジェ クト リテラ ル 型 
式 で 指定 し ます 。「keyPath」 (キー の パス ) 、「 autolncrement.| (キー の 自動 イン クリ メン 

ト ) を 指定 する こと が で きま す 。 
作成 済み の デー タベース を 削除 する に は [ImdexedDB」 オ ブ ジ ェクト (「IDBFactory」 
オプ ジェ クト ) の | deleteDatabase() 」 メ ノッ ド を 使い ます 。 パラ メー タ に は 、 削 除 し た い デ ー 
タベース 名 を 指定 し ます 。 














内 計 下 三 還 必 2 





@ ファ イル を 作成 する 1 全 A00V3n RY7ovt1mtctcNetsZopPRZWRRCMAK 人 GT 人 > 人 BPIPFKYY と の いい ドイ D.696 
e Indexed Database が 使用 可能 か 調べ る ………… 0202020 7 パ 。 、P0 半 WV p.833 
@e Indexed Database で デー タベース を 開く いで rt VC: る が まま る YY バド D.835 
e Indexed Database に デー タ を 書き 込む …… じ ぐー 生 ピ ト p.84 1 
e Indexed Database が ら デ ー タ を 読み 出す ーー own p.845 





紀 包 JILIN: コ らら 


Indexed Database に デー タ を 書き 込む 





ここ で は 、 オプ ジェ クト スト ア に デー タ を 書き 込む 方 法 に つい て 解説 し ます 。 


= まがい 中 mm HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta Charset="utf-8"> 
<tttte>Sqmple</tttle> 
<scrtpt src="]s/sampte .]S "></SCrtDt> 
</head> 
<body> 
<h3> デ ー タ を 書き 込む </h3> 
<form> 
<tnput type="button" vatue="DB を 開く "1d="openDB"> 
<tnput type="button" vatue="DB 削 除 " 1d="deteteDB"><br> 
メモ :<input type="text" vaqlue="db test" 1d="memoDatq"> 
<tnput type="button" value="DB に 書き 込み " id="saveDB"> 
</form> 
<OUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.qddEventLtstener("1ogd" , functton()1 
var ele = document.getEtementsByTagName("output")[9] : 
// Indexed DB オプ ジェ クト の 読み 出し 
var db = window.tndexedDB || wtndow.webkttTndexedDB || wtndow.mozIndexedDB: 


var IDBTransactton = 





wtndow.TDBTraqnsaction || wtndow.webkttTDBTraqnsqctton || wtndow.mozTDBTransactton: 
var TDBKeyRange = window.TDBKeyRange || wtndow.webkttTIDBKeyRange || wtndow.mozTDBKeyRange: 
var myDB = nult: // デー タベース へ の 有無 を 示す 変数 
// DB 作成 の ボタ ン に イベ ント を 割り 当て る 
documernt.getEtementByIdC"openDB").qddEventLtstener("clLtck", functton(){ 
// デー タベース バー ジョ ン を 変数 に 入れ て お く 
var dbVer = 1: 
// デー タベース を 開く (も し く は 新規 作成 )。 デー タベース パー ジョ ン は 1 
var req = db.open("testDB992" , dbVer): 
// デー タベース の オー プン に 成功 し た 時 の 処理 
req .OnSuccesSs = functton(evt){ 
ete.innerHTML = "デー タベース を オー プン し まし た <br>": 
myDB = thts.result: 
ele.innerHTML += "デー タベース 名 : "+myDB .name+"<br>": 
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ele.tnnerHTML += "バー ジョ ン :"+myDB.verston+"<br>": 「 マ | 
// ン ソー メ ョ ン 豆 み 
1f (myDB.verston != dbVer){ 
// 新た な バー ジョ ン を 設定 
var setVerston = myDB.setVerston(dbVer): 
// パー ジョ ン 設 定 に 成功 し た 場合 
setVerston.onsuccess = functton(){ 
// オプ ジェ クト スト ア を 作成 。 キー は 自動 イン クリ メン ト 
tryt 
// Chrome で は { gutoIncrement : true 1 が な いと エラ ー 


var ob〕JStore = myDB.creqteObjectStore("memo"。 { qutoTncrement : true }): 


+catch(e){ 
ele.tnnerHTML += "すでに オプ ジェ クト スト ア が あり ます 。 削除 し て か ら 実 行 し て くだ さい ": 
Peturn: 

} 


ele.innerHTML += "オプ ジェ クト スト ア の 作成 に 成功 し まし た <br>": 
ete.tnnerHTML += "新た な デー タベース バー ジョ ン :"+myDB .version+"<br>": 


} 
#else{ 
ele.tnnerHTML += "オプ ジェ クト スト ア は すでに 作成 済み で す <br>": 


} 
} 
// デー タベース の オー プン に 失敗 し た と き の 処 理 
req.Onerror = functton(evt){ 
ete.tnnerHTML = "デー タベース の オー プン に 失敗 し まし た <br>": 
} 
+。 fatse): 
// DB 削除 の ボタ ン に イベ ント を 割り 当て る 
document .getElLementByTd("deleteDB").qddEventListener("click"。functton(){ 
db .deleteDatabase( "testDB991" ): 
ele.tnnerHTML += "デー タベース を 削除 し まし た <br>": 
}+, faqtse): 
// DB 保存 の ボタ ン に イベ ント を 割り 当て る 
documernt.getElementById("saveDB").gddEventListener("clLtck"。functton(){ 
// デー タベース が 開か れ て いる か 確認 
tf (!myDB){ 
ele.innerHTML += "デー タベース が 開か れ て いま せん <br>": 
return: 
} 
// テキ スト フィ ー ル ド に 入力 され て いる メモ の 内 容 を 読み 出す 
Var memotext = document.getElLementByTdC( "memoData") .vatue: 
// トラ ン ザ クシ ョ ン の 設定 。 memo に 対し て 読み 書き CREAD_WRITE=1) 
var traqns = myDB.transactton(["memo"], ITDBTransactton .READ_WRITE): 
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var store = trans.ob]ectStore( "memo"): 

// メモ 内 容 を 書き 込み 

Store . Dut({ "mymemo" : memotext +}): 

ele.tnnerHTML += "「"+memotext+"」 の 内 容 を 保存 し まし た <br>": K4 
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+, faqlse): 4 
+。 faqlse): 


プラ ウザ で index.html を 表示 し 、| DB を 開く ] ボ タン を クリ ッ ク す る と 、 デー タベース が 開き ま 
す 。 デー タベース が 存在 し な い 場 合 は 、 新規 に 作成 され ます 。 





eee ! DB に 書き 込み 
デー タ ベ ー ス を オー ブン し まし た 

了 昌 で 全 欠 cs testDBO02 

ハー ジ ヨ ノ 

オブ ジェ クト スト ア は すでに 作成 済み で す 





テキ スト フィ ー ル ド に 文字 を 入力 し 、「 DB に 書き 込み 」 ボ タン を クリ ッ ク す る と 、 デー タベース に 
書き 込み が 行わ れ ま す 。 












メモ Gg 
を ジニー ー プ ン し まし た 
デー タベース 名 :testDB002 


バー ジョ ジン * 1 1 
オブ ジェ クト スト ア は すでに 作成 済み で す 











⑮ Sample ・ 
を っ Ge 


デー タ を 書き 込む 


OB) [ 際 


メモ :|CRLabo ”"” " | 5 才 SA み a 
デー タベース を オー ブン し まし た 
の testDBO02 

バー ジョ ン 

オブ ジェ クト スト ア は すでに 作成 済み で す 

「CR Labo」 の 内 容 を 保存 し まし た 
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= 中 ヨ = オブ ジェ クト スト ア に デー タ を 書き 込む に は トラ ン ザ クシ ョ ン を 利用 する 


オブ ジェ クト スト ア に デー タ を 書き 込む に は 、 ト ラン ザク ショ ン を 利用 し ます 。 「transaction 
() 」 メ ソ ッ ド の 最初 の パラ メー タ に オブ ジェ クト スト ア 名 、 2 番目 の パラ メー タ に は 読み 出し 


か 読み 書き な の か を 指定 し ます 。「IDBTransaction READ_ONLY」 な ら 読 み 出 し の 
み 、| IDBTransaction. READ_WRITE」 な ら 読み 書き 可能 な 状態 で 処理 され ます 。 実 
際 に デー タ を 書き 込む に は 、「put () 」 メ ソ ッ ド を 使い ます 。 パラ メー タ に は 、 オ ブ ジ ェクト リ テ 
ラル 下 式 で 書き 込み を 行う デー タ を 指定 し ます 。 


ma 回 2 較 IndexXGd Database の 仕様 変更 と サン プル の 動作 に つい て 


Indexed Database は 仕様 変更 が 多く 、 プラ ウザ の バー ジョ ン に よっ て 動作 し な い 場 
合 が あり ます 。 プラ ウザ の 自動 更新 に よっ て バー ジョ ン が 変更 され た 場合 、 サン プル プロ 
グラ ム が 動か な く な る こと が あり ます 。 









関連 項目 ょ ゅ 


の の 前 。 0 0 PS 科 近 0 人 p.683 
ぁ る バ イナ リフ ァイル 赤 肝 み 込 お ……………… 坦 語 NN ます MINI p.685 
@ ファ イル に テキ スト を 科 媒 込 4 0 22 こさ yok p.699 
ゅ 保存 され て いる ファ イル の 内 容 を 鏡 み 出す 信和 p.702 
e Web Storage に デー タ を 設定 する …… 必 や 他 l 上 { ニ ドド ーーー…… な ・D.738 
e Web Storage か ら デ ー タ を 読み 出す … ホ …ー…① 居 選 … ド ドド ドド ドド ーー …"p.740 
@ Indexed Database が 使用 可能 か 調べ る 00 の に NHAU20 LBTlet JA 2 ます p.833 
* Indexed Database で デー タベース を 開く NAS 4 な る KG を 9222 40063 Dp.835 
e Indexed Database で オブ ジェ クト スト ア を 作成 する 村 寺 0 の BSA も AG きれ cot D.837 
_e Indexed 了 稀 tbas8 か ら デ ー タ を 読み 出す 字 … い ……… ド SL に p.845 





らら E に LEIEON- こ コロ ピロ / 


Indexed Datahase か ら デ ー タ を 読み 出す 





ここ で は 、 オブ ジェ クト スト ア に 保存 され て いる デー タ を 読み 出す 方 法 に つい て 解説 し ます 。 


= まい 中 目 寺 相 = ロコ 委 HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<metg charset="utf-8"> 
<tit1le>Samplte</t1tle> 
<scrtpt src="]s/sample.]S "></SCrtDt> 
</head> 
<body> 
<h3> 保 存 デ ー タ を 全て 読み 出し 表示 する </h3> 
<form> 
<input type="button" vatue="DB を 開く "1d="openDB"> 
<input type="button" value="DB か ら 読み 出し " 1d="readDB"> 
</form> 
<OU モ Du キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow . addEventLtstener("1ogd" 。 function()t 
var ele = document .getEtementsByTagName("output")[9]: 
// Indexed DB オプ ジェ クト の 読み 出し 
var db = window.indexedDB || wtndow.webkttTndexedDB || wtndow.mozTndexedDB: 
var IDBTransactton = 
wtndow.TDBTransaction || wtndow.webkttIDBTransactton || wtndow.mozIDBTraqnsactton: 
var ITDBKeyRange = wtndow.TDBKeyRange || wtndow.webkttIDBKeyRange || wtndow.mozIDBKeyRange: 
var myDB = nult: // デー タベース へ の 有無 を 示す 変数 
// DB 作成 の ボタ ン に イベ ント を 割り 当て る 
document .getEtementById("openDB").qddEventLtstener("cltck" functton()1 
// デー タベース バー ジョ ン を 変数 に 入れ て お く 
var dbVer = 1: 
// デー タベース を 開く (も し く は 新規 作成 )。 デー タベース バー ジョ ン は 1 
var req = db.open("testDB992" , dbVer): 
// デー タベース の オー プン に 成功 し た と き の 処 理 
req.OnSuccesSs = functton(evt){ 
ele.innerHTML = "デー タベース を オー プン し まし た <br>": 
myDB = thts.result: 
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ele.innerHTML += "デー タベース 名 : "+myDB .name+"<br>": 


ele.tnnerHTML += "バー ジョ ン :"+myDB.verston+"<br>": 
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// デー タベース の オー プン に 失敗 し た と き の 処理 人 
red.Onerror = functton(Cevt)} 
ele.innerHTML = "デー タベース の オー プン に 失敗 し まし た <br>": 
} 
}, false): 
// DB 読み 出し の ボタ ン に イベ ント を 割り 当て る 
documert.getEtementById("readDB").gddEventLtstener("click"。 functton(){ 
// デー タベース が 開か れ て いる か 確認 
tf (!myDB){ 
ele.tnnerHTML += "デー タベース が 開か れ て いま せん <br>": 
Peturn: 
} 
// トラ ン ザ クシ ョ ン の 設定 。 memo に 対し て は 読み 出し 専用 CREAD_ONLY=9) 
Vagr trans = myDB.transactton(["memo"], TDBTransactton .READ_ONLY): 
Var store = trgns .ob]ectStore( "memo"): 
Vor req = Store.cCount(): 
// 正しく 読み 出せ た 場合 の 処理 
req.OnSucceSss = functton(evt) { 
// 登録 合計 数 が 入る 
var totgl = evt.target.result: 
// 最初 の メモ 内 容 を 読み 出し 
forCvar 1=1: it<totat: 1++){ 
Var req = Store.get(1): 
// 正しく 読み 出せ た 場合 の 処理 
red.OnSucceSS = functton(evt) { 
Var doto = evt.target . result: 
// undefined な ら デ ー タ が な い 
tf (!datog){ 
ele.tnnerHTML += "<hr> デ ー タ が あり ませ ん <br>": 
return: 
} 
Var text = datq.mymemo: 
// 読み 出し た 結果 を 表示 


ele.tnnerHTML += "<hr>"+text+"<br>"・ 


}, fgqlse): 
}, fgqlse): 


ブラ ウザ で index.html を 表示 し 、「DB を 開く 」 ボ タン を クリ ッ ク す る と 、 デ ー タ ベー ス が 開き ます 。 


厨 ビ ピロ 丁 | 口 N - ヨ 5 ワ 7 WIndexed Datahase か ら デ ー タ を 読み 出す 


保存 デー タ を 全て 読み 出し 表示 する 





_DB 複 双 .| |DBO ら 読み 出し 。 

デー タベース を オー プン し まし た 
デー タベース 名 : testDB002 
バー ジョ ン :1 





「DB か ら 読 み 出 し 」 ボ タン を クリ ッ ク す る と 、 デー タベース 内 に 書き 込ま れ た デー タ が 表示 さ 
北 ま すら 


ー タ ベー ス を オー プン し まし た 
デー タベース 名 :testDBO002 
ハー ジョ ン : 1 

db test 

CR Labo 


Sample1 


mi ヨ ョ ョ Im 引 オブ ジェ クト スト ア の デー タ を 読み 出す に は トラ ン ザ クシ ョ ン を 利用 する 


オブ ジェ クト スト ア の デー タ を 読み 出す に は 、 ト ラン ザク ショ ン を 利用 し ます 。 | transaction 
() 」 メ ノッ ド の 最初 の パラ メー タ に オブ ジェ クト スト ア 名 、 2 番目 の パラ メー タ に は 読み 出し 
で ある こと を 指定 し ます 。 

デー タ を 読み 出す に は 、「 get() 」 メ ノッ ド を 使い ます 。 パラ メー タ に は 、 キー 番号 を 指定 し 
ます 。 番号 は 1 か ら 始ま り 、 登録 ミ き て て いる デー タ 数 分 まで に な り ま す 。 登録 きれ て いる デー 
タ の 数 は 、 オブ ジェ クト スト ア の 「count () 」 メ ノッ ド で 取得 する こと が で きま す 。「countU」 メ 
ソ ッ ド も 非同期 な の で 、「onsuccess」 に コー ル バ ッ ク 関 数 を 指定 し ます 。 


mml 画 邊 に 織 dBxGd Database の 仕様 変更 と サン プル の 動作 に つい て 


Indexed Database は 仕様 変更 が 多く 、 ブラ ウザ の バー ジョ ン に よっ て 動作 し な い 場 
合 が あり ます 。 プラ ウザ の 自動 更新 に よっ て バー ジョ ン が 変更 され た 場合 、 サン プル プロ 
グラ ム が 動か な く な る こと が あり ます 。 











関連 項目 ょ ゅ 


e Web Storage か ら デ ー タ を 読み 出す …… oo p.740 
e Indexed Database が 使用 可能 か 調べ る …… で oe p.833 
elIndexed Database で デー タベース を 開く … ド iiirorrrrnrrenrrnrnrrrm p.835 
e Indexed Database で オブ ジェ クト スト ア を 作成 する …… つ …… ド ーー ドド oirrn 0D.837 
e Indexed Database に デー タ を 書き 込む お 0 D.84 ] 
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=1 ゴ slmINBc に 1= 
Web Audio が 使用 可能 か 調べ る 


ここ で は 、 目 由 に 音 を 生成 で きる Web Audio が 使用 可能 か 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<metq charset="utf-8"> 
<tttte>SampLe</ttt1e> 
<SCPtDt src="]S/sqmple.]S"></sCrtpt> 

</head> 

<body> 
<h3>Web Audio が 使用 で きる か 調べ る </h3> 
< く OUutDu キ ></OutDut> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("togd"。 functton(){ 
var ele = document.getEtementsByTagName( "output")[9]: 
// Web Audto オ プ ジ ェ クト が 使用 で きる か 調べ る 
1tf(Cwtndow .webk1ttAudtoContext){ 
ele.tnnerHTML = "Web Audio は 使用 で きま す ": 
+etse{ 
ele.innerHTML = "Web Audio は 使用 で きま せん ": 
} 
}, foqlse): 


ブラ ウザ で index.html を 表示 する と 、 Web Audio が 使用 で きる 場合 は 、 次 の よう に 表示 さ 
れん ます 。 





Web Audio が 使用 で きる か 調べ る 


Web Audio は 使用 で きま す 
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コロ イエ | 口 N - コ 5 日 m Web Audio が 使用 可能 か 調べ る 


Web Audio が 使用 で き な い 場合 は 、 次 の よう に 表示 され ます 。 
Web Audio が 使用 で きる か 調べ る 


Web Audio は 使用 で きま せん , 


Web Audio が 利用 で きる か どう か は 
ョ laudioContext]」 オ ブ ジ ェクト の 有無 を 調べ る 


HTML5 で は 音 を 扱う 場合 、| audio」 要 素 (| Audio]」 オ プ ジ ェ クト ) が 使わ れ ま す 。 た だ し 、 


「audio」 要素 を 使用 し た 場合 は 、 あら か じ め 用 意 さ ん れん て いる サウ ンド ファ イル か 、 リア ル タ 
イム に 人 入力 し た サウ ンド の ど ち か ら に な り ま す 。 この た め 、 周波 数 を 指定 し て 任意 の 音 を 生 
成す る と いっ た 用 途 に は 使え ませ ん 。 

任意 の 音 を 生成 する 場合 に は 、 Web Audio API を 利用 し ます 。 Web Audio API を 
利用 すれ ば 、 任意 の 音 を 作り 出す こと が で きま す 。 

Web Audio が 使え る か どう か は 、| window」 オ プ ジ ェ クト 内 に | audioContext」 オ ブ ジ ェ 
クト が ある か どう か 調べ ます 。| audioContext」 オ プ ジ ェ クト が な い 場 合 は 、| undefned」 
に な り ま す 。 な お 、2012 年 7 月 時 点 で は 、| webkitAudioContext」 の よう に ベン ダー プレ フィ ッ 
クス を 付け な いと 動作 し ませ ん 。 





関連 項目 





e オーディ オ を 再生 停止 する …… の ドド に に に p.610 
eWeb Audio で 音 を 只 ら す ii…i ド or p.850 
eWeb Audio で ファ イル を 読み 込ん で 演奏 する … "に じ [iiiiiiqioiieeeoeeeeernrenererert p.852 
e Web Audin で ポー ム を 指定 する mm 和 nm p.855 
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5 ら E DTIHN- コ 59 


Web Audio で 音 を 鳴ら す 


ここ で は 、 目 由 に 音 を 生成 で きる Web Audio で 音 を 鳴ら す 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<metq charset="utf-8"> 
<title>SqmpLe</ttt1le> 
<SCrtDpt Src="]s/sample.]S"></scrtpt> 
</head> 
<body> 
<h3>Web Audio で 音 を 鳴ら す </h3> 
<form> 
<tnput type="button" vatue="Beep" 1d="ptagySound"> 
</form> 
< く OUtDut></OutDUt> 
</body> 
</html> 


JavaScript の コー ド (samplejs) 


wtndow. gddEventLtstener("1oad", functton(){ 

var ele = document.getElementsByTagNqme( "output")[9] : 

// Web Audio API が 使え る か 調べ る 

1f (!wtndow.webkttAudioContext){ 
ele.tnnerHTML = "Web Audto API は 使え ませ ん ": 
Peturn: 

} 

// ボタ ン に イベ ント を 設定 する 

document .getElementByTd("ptLaySound").qddEventLtstener("ctLtck"。functton(){ 
// AudioContext オ プ ジ ェ クト を 取得 CWebKtt) 
Var context = new webk1tAudtoContext( ): 
// 音 を 鳴ら す た め の バッ ファ を 生成 
Var qudtoSource = Context.createBufferSource( ): 
// パッ ファ の チャ ン ネ ル 数 は 1、 3 秒 分 の 4996 バ イト バッ ファ 、 サン プリ ング レー ト は 48KHz 
audtoSource .buffer = context.createBuffer( 1, 4996*3, 48999 ): 
// オー ディ オ ソ ー ス (ノー ド ) を 接続 
qudtoSource . Connect(context . desttnatton): 
// 最初 の チャ ン ネ ル の バッ ファ に 直接 アク セス 
var datoq = qudtoSource.buffer .getChannetData(9): 
// サイ ン 波 形 を 生成 し て バッ ファ に 入れ る 
for (var 1=9: 1<data.1Length: 1++) { 

data[1] = Math.floor(Math.stnC1 * Math.PI/189)): 
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mW 選 ロイ | 口 N - コ 5 mw Web Audio で 音 を 鳴ら す 


1 旬 作 
// 9 秒 か ら 再 生 
audioSource . noteOn(9): 
+, faqlse): 
+}, false): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 音 が 鳴り ます 。 


mm に N 下 Web Audio API で 音 を 鳴ら す に は オー ディ オ コ ン テキ スト を 生成 する 


Web Audio API で 音 を 鳴ら す に は 、 オー ディ イオ コン テキ スト を 生成 し ます 。 オー ディ オ 
コン テキ スト は 、「new webkitAudioContext() 」 と し て 生成 し ます (ベン ダー プレ フィ ッ ク 
ス 付 き に な っ て いる ) 。 次 に 、 生 成 し た オー ディ イオ コ ン テ キ スト の 「createBufferSource() 」 
メソ ッ ド を 使っ て 、 音 を 出力 する た め の オ ー デ ィ オ ソー ス ( ソ ノード) を 生成 し ます 。 

Web Audio API は 、 複数 の ノー ド を 合成 (波形 合成 ) し て 音 を 鳴ら し ます 。 単純 に 音 
を 鳴ら す に は 、 オー ディ イ オ ソー ス の | buffer」 プロ パテ ィ に 、 実際 に 音 を 出す た め の デ ー タ 
を 人 入れ ま す 。 これ は 、| createBuffer() 」 メ ソ ッ ド を 使っ て 行い ます 。| createBuffer() 」 
メソ ッ ド で は 、 チャ ン ネ ル 数 、 バッ ファ サイ ズ 、 サン プリ ング レー ト の 3 つ を 指定 し ます 。 

あと は 、 生成 し た バッ ファ に 音 を 出す た め の 数 値 を 設定 し ます 。 サン プル で は モノ ラル 
な の で 、| getChannelData(0) 」 と し て チャ ン ネ ル の バッ ファ を 取得 し 、 その バッ ファ に 音 
量 を 入れ て いま す 。 

バッ ファ に 鳴ら す デ ー タ を 用 意 し た ら 、 オー ディ イ オ ソ ー ス の 「noteOn () 」 メ ソ ッ ド を 使っ て 
音 を 出し ます 。「noteOn() 」 メ ソ ッ ド の パラ メー タ に は 、 再生 を 開始 まで の 秒 数 を 指定 し 
ます 。「noteOn(0) 」 な ら す ぐに 再生 し 、「noteOn(3)」 な ら 3 秒 後に 再生 し ます 。 
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ee ディ オ が 尊 あ 2 森 半 前 2 入信 0 人 60 れ 1 いい 0evret が ett2G cecryesotokoe ve p.610 
WishA1ndiG が が 便 用 本 角間 率 Re p.848 
eWeb Audio で ファ イル を 鞍 み 込ん で 演奏 する や 上 いこ 必 … バ バ (ドー ンー p.852 
Ed Web Audio で ボリ ュー ム を 指定 する 0 な: 信和 池宮 全休 閑 ::8: 渦 あ き 4.9 : D.855 
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EE JNNー コ 5 し 


Web Audio で ファ イル を 読み 込ん で 演奏 する 





ここ で は 、 Web Audio で サー バー 上 に ある ファ イル を 読み 込ん で 演奏 する 方 法 に つい て 解 
品 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>SqmpLe</t1ttle> 
<SCPtpt Src="]S/sampte.]S"></SCrtDt> 
</head> 
<body> 
<h3>Web Audto で ファ イル を 読み 込み 演奏 する </h3> 
<form> 
<tnput type="button" vaqlue=" 再 生 " 1d="ptaySound"> 
</form> 
< ぐ OU て DU キモ ></OU て Dut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oad"。 functton(){ 

var ele = document.getElementsByTagName( "output")[9] : 

// Web Audio API が 使え る か 調べ る 

tf (!wtndow .webkttAudioContext){ 
ele.tnnerHTML = "Web Audto API は 使え ませ ん ": 
Peturn: 

} 

// オー ディ オフ ァイル の デー タ を 入れ て お く バ ッ フ ァ 

var buf = null: 

// AudioContext オ プ ジ ェ クト を 取得 CWebKit) 

var context = new webk1tAudtoContext( ): 

// 非同期 で オー ディ オフ ァイル を 読み 込み 

Var xhr = new XMLHttpRequest( ): 

// sound/sqmple .mp3 フ ァイル を 読み 込み 

xhr.open("get", "sound/sampte .mp3" 。 true): 

// qrraybuffer を 指定 。 指定 し な いと エラ ー に な る 

xhr.responseType = "arraybuffer"・ 

// デー タ の 読み 込み が 完了 し た 際 の 処理 

xhr.onlogd = functton(){ 


context .decodeAudtoData(xhr.response, functtonCbuffer){ 


mWm 王 ビ ピロ TI 口 N- コ 6 ロロ m Web Audio で ファ イル を 読み 込ん で 演奏 する 


// 読み 込ん だ デー タ を パッ ファ に 入れ る ぁ 竹 
buf = buffer: 
ele.tnnerHTML = "オー ディ オデ ー タ の 読み 込み が 完了 し まし た ": 
}): 
} 
xhr.send( ): 
// ボタ ン に イベ ント を 設定 する 
documernt.getELementById( "plLgySound" ) .gddEventLtstener("cLtck"。 functton(){ 
tf (!buf){ 
ete.innerHTML = "デー タ が 完全 に 読み 込ま れ て いま せん ": 
Peturn: 
} 
// パッ ファ を 作成 
var qudtoSource = Context.createBufferSource( ): 
// 読み 込ん で バッ ファ の デー タ を 設定 
qudtoSource .buffer = buf: 
// オー ディ オノ ー ド を 接続 
qudtoSource . Connect(context.desttnatton): 
// オー ディ オ を 再生 
qudtoSource .noteOn(9): 
+。 fatse): 
+。 false): 


回 還 国 回 
ブラ ウザ に よっ て は 、 ロー カル ディ スク 上 で は 動作 し ませ ん 。 その 場合 は 、 ネッ トワ ー ク 環境 (Web 


サー バー 上 ) で 動作 を 確認 し て くだ さい 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 読み 込ん だ オー ディ オフ ァイル が 演 
奏 さ れ ま す 。 





Web Audio で ブフ ァイル を 読み 込み 演奏 する 


オー ディ オデ ー タ の 読み 込み が 完了 し まし た 
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mW 選 E ビ ビ TI ロ NN- ヨ 6 口 mw Web Audio で ファ イル を 読み 込ん で 演奏 する 
ロ NEP ロ INT Web Audio API で オー ディ オフ ァイル を 演奏 する に は 
非同期 通信 を 使っ て ファ イル を 読み 込ま せ て お く 
Web Audio API で オー ディ オフ ァイル を 演奏 する に は 、 再生 する ファ イル を 非同期 通 
信 を 使っ て 読み 込ま せ て お く < 必要 が あり ます 。 その 際 、「responseType」 プロパ ティ に は 、 
| arraybuffer」 の デー タ 型 を 指定 し て お きま す 。 


再生 する に は 、 オー デイ オ コ ン テキ スト を 取得 後に 、 オー ディ オ ソ ー ス を 用 意 し ます 。 これ 
は 、| createBufferSource() 」 メ ソ ッ ド を 使っ て 生成 し 、「buffer」 プロ パテ ィ に 非同期 通信 
を 使っ て 読み 込ん だ オー ディ イオ デー タ を 入れ ます 。 その 後 、 オ ー デ イィ イオ ノー ド を 「connect() 」 
メソ ッ ド を 使っ て 接続 し ます 。 

あと は 、| noteOn) 」 メ ソノ ッ ド を 使え ば 読み 込ま れ た オー デイ オフ ァイル が 再生 きれ ます 。 





関連 項目 ょ ゅ 


細 he7y オ 大 琴 生 人 翌 傾 義和 くい. が の <e0 341442UCu2HH64esv< さ se p.610 
馬 ー づ オ 9 の の 大 生み p.625 
e Web Audio が 使用 可能 か 調べ る ……… ぐ (上 上 上 toe p.848 
人 kWMBD AUCIO で 普 を 障 ら す 2 ワ iz】z ワ z ワ z ワ ze タタ p.850 
MMBD AUGIO で ポリ コー ム 存 握 概 竹 各 so p.855 
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三 ロビ TI 口 N- は 6 1 
Web Audio で ボリ ュー ム を 指定 する 


ここ で は 、 Web Audio で ボリ ュー ム を 指定 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<tttle>SampLe</t1tle> 
<SCrtDt src="]s/sample.]S"></SCP1Dt> 
</head> 
<body> 
<h3>Web Audto で ボリ ュー ム を 指定 する </h3> 
<form> 
ボリ ュー ム :<input type="text" vatue=" の .75" 1d="votume" stze="4"> 
<tnput type="button" vatue=" 再 生 " 1d="ptaySound"> 
</form> 
<OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . qaddEventLtstener("1oagd" 。 functton() も 
// オー ディ オフ ァイル の デー タ を 入れ て お く バ パッ ファ 
var buf = null: 
// AudtoContext オ プ ジ ェ クト を 取得 (WebKit) 
var context = new webkttAudtoContext(): 
// 非同期 で オー ディ オフ ァイル を 読み 込み 
var xhr = new XMLHttpRequest( ): 
// sound/sampte .mp3 フ ァイル を 読み 込み 
xhr.open("get", "sound/sample.mmp3" ,。 true): 
// grraybuffer を 指定 。 指定 し な いと エラ ー に な る 
xhr.responseType = "arraybuffer": 
// デー タ の 読み 込み が 完了 し た 際 の 処理 


xhr.onload = functton(){ 





context.decodeAudtoData(Cxhr.response, functton(buffer){ 
// 読み 込ん だ デー タ を バッ ファ に 入れ る 
buf = buffer: 
var ele = document .getElementsByTagName( "output")[9] : 
ele.innerHTML = "オー ディ オデ ー タ の 読み 込み が 完了 レ しま した": 
} う : 


IdVS 詩 NGGT]W 和 TH EE に 4 


+ 
xhr.send(): 
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還 王 ヒ ピロ TI ロロ NN - ヨ 6 ] mW Web Audio で ボリ ュー ム を 指定 する 


// ボタ ン に イベ ント を 設定 する W] 
document.getElementByTd( "playSound").qddEventListener("cttck",。functton(){ 
Var oudtoSource = context.createBufferSource(): // パッ ファ を 作成 
var gotnNode = context.cregteGainNode(), // ゲイ ン ノ ー ド を 作成 
// 読み 込ん で バッ ファ の デー タ を 設定 
qudtoSource .buffer = buf: 
qudtoSourCce . Connect(gatnNode): 
gatnNode . connect(context . desttnatton) : 
// ボリ ュー ム を 読み 出し て 設定 
var vol = parseFtlogt(document .getELementByTd( "volume") .vqtue): 
gaqtnNode .gatn.vatue = vol: 
qudioSource .noteOn(9): // オー ディ オ を 再生 
}。 faglse): 
}, faqtse): 


ml 上 回 


コラ ウサ に よっ て は ほ は, ロー ry その 場合 は 、 ネッ トワ ー ク 環境 (Web 
: サー バー 上 ) で 動作 を 確認 し て くだ さ 


ブラ ウザ で index.html を 表示 し 、 ボリ ュー ム (0.0 一 1.0) を 入力 し た 後に 「 再 生 | ボタ ン を クリ ッ 
ク す る と 、 読み 込ん だ オー ディ オフ ァイル が 指定 し た ボリ ュー ム で 演奏 され ます 。 


Web Audio で ボリ ュー ム を 指定 する 


ボリ ュー ム : |0.75 
オー ディ オデ ー タ の 読 の 込 み が 完 了 し まし た 





ご 





エ 還 旨 請 間 陳 還 Web Audio API で ボリ ュー ム を 指定 する に は 
「createGainNode()」 メソッド を 使っ て ゲイ ン ノ ー ド を 生成 する 
A Web Audio APIT で ボリ ュー ム を 指定 する に は 、「createGainNode() 」 メ ソ ッ ド を 使っ 
当 て ゲイ ン ノ ー ド を 生成 し ます 。 この ゲイ ン ノ ー ド の | gain.value」 プロ パテ ィ に ボリ ュー ム を 
に 示す 小数 値 を 人 人 れ ま す 。 ボリ ュー ム は 、「00」ー「1.0」 ま で の 範囲 で 、 値 が 大 きい ほど ボ 
チ リュ ー ム が 大 きく な り ま す 。 
人 生成 し た ゲイ ン ノ ー ド を オー ディ オノ ー ド に 接続 する と 、 その オー ディ オノ ー ド の 音量 が 
と 設定 され ます 。 あと は 、| noteOn() 」 メ ソ ッ ド を 使え ば 、 読み 込ま れ た 指定 し た ボリ ュー ム 
の で 再生 され ます 。 
関連 項目 pp " 
「 ] オー ディ オ の ボリ ュー ム を 設定 0 ミュ ー ト に する 00 必要 旨 人 D.6 ら 0 
2 Web Audio が 使用 可能 か 調べ る 全権 ら い p.848 
@ Web Audio で 音 を 鳴ら す の いす が 全 移 キ も 更衣 2 Dp.850 
@ VeDh AudiOo で ファ イル を 読み 込ん で 演奏 する 本人 6 宇和 を: 人 を ば 人 (00 入る る が D.85 
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Pointer Lock API が 使用 可能 か 調べ る 








ここ で は 、 ブル スク リー ン 表 示 時 に マウ スポ イン タ が ロッ ク 可 能 か どう か 調べ る 方 法 に つい て 
解説 し ます 。 


= まや 上 = 中 ma HTML の コー ド (index.htmD) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tittle>SqmpLe</tttle> 
<SCrtDt src="]S/sqmple.]S "></SCP1Dt> 
</heoad> 
<body> 
<h3>Potnter Lock サ ンプ ル </「3> 
<OutDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow.qddEventListener("1oad" ,。 functton(){ 
var ele = document.getEtementsByTagName( "output")[9]: 
// PointerLock API が 使用 で きる か 調べ る 
var h3ele = document.getElementsByTagName("h3")[9] : 


var pLock = h3ele.mozRequestPotnterLock: 





tfCpLock){ 
ele.innerHTML = "PotnterLock API は 使用 で きま す ": 
+etset 
ete.tnnerHTML = "PointerLock API は 使用 で きま せん ": 
} 
}, false): 


ブラ ウザ で index.html を 表示 する と 、 Pointer Lock API が 使用 で きる 場合 は 、 次 の よう に 
表示 され ます 。 
[ Sample 


(《)@ re 今 ・c 下 の ア | 人 加 ・ 符 


ldV お 詩 SNSGT]W」TH EE に FEE4 ミ に 


Pointer Lock サ ン ゴ ル 


PointerLock API( は 使用 で きま す 
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還 ビ ロ 丁 | 口 N - ヨ 62 mW_ Pointer Lock API が 使用 可能 か 調べ る 


Pointer Lock API が 使用 で き な い 場合 は 、 次 の よう に 表示 され ます 。 


Poimter Lock サ ンプ ル 
PointerLock API は 全 用 で きま せん , 


較 還 請 問 了 国 マウ スポ イン タ が ロッ ク 可能 か どう か 調べ る に は 
「requeStPointerLock()」 メソ ッ ド の 有無 を 調べ る 
Pointer Lock API を 使う と 、 フル スク リー ン モ ー ド で マウ スポ イン タ を ロッ ク し て 表示 し 
な いよ うに する こと が で きま す 。 マウ スポ イン タ を ロッ ク す る 対象 と な る 要素 に は 「request 
PointerLock() 」 メ ソ ッ ド が 用 意 き され て いま す 。 Pointer Lock API が 使用 可能 か どう か 
は 、 ペー ジ 上 に ある 有 要素 に | requestPointerLock() 」 メ ソノ ッ ド が ある か どう か で 調べ る こ 
と が で きま す 。 
な お 、2012 年 7 月 時 点 で は Firefox の 場合 、 メ ノッ ド 名 は 「mozRequestPointerLock() 」 
と な っ て いま す 。 





LIE 10 ! Chrome 」 





=1 コ malmINBcT=fc 
タブ を 切り 換え た 場合 に 処理 を 行う 


ここ で は 、 タブ を 切り 換え た 場合 に 処理 を 行う 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttte>Sample</tttle> 
<SCrtpt src="]S/sqmple .]S "></ScrtDt> 

</head> 

<body> 
<h3>Page Visibttity AP エサ ンプ ル </h3> 
<OUtDut></OutDUut> 

</body> 

</html> 


JavaScript の コー ド (sample.jS) 


window.addEventLtstener( "toad" 。 functton()† 





var ele = document.getEtementsByTagName( "output")[9]: 
// Google Chrome の 場合 
document . addEventListener( "webkttvtstbttttychange" functton(){ 
// 状態 を 表示 
vtsCheckCdocument .webkttHtdden , document .webkitVtstbt11tyState): 
+, faqlse): 
// Ftrefox の 場合 
document .addEventLtstener("mozvtstbititychange", functton()+ 
// 状態 を 表示 
vitsCheckCdocument.mozHtdden, document.mozVtstbi lttyState): 
+, false): 
// IE19 の 場合 
document .addEventListener( "msvtsibttlitychange", functton()t 
// 状態 を 表示 
vtsCheckCdocument .msHtdden, document .msVtstbttityState): 
+, false): 
// 画面 に 表示 
functton visCheckCvtsType, vtsState)+ 
// 切り 替わっ た 時 間 を 取得 
var dateOb] = new Date(): 
// 表示 状態 を 調べ る 
tf (vtsType){ 
// ペー ジ が 隠れ た 場合 
ele.tnnerHTML += "ペー ジ が 隠れ まし た :"+date0bj+"<br>": 





IdHVS 詩 〇 NGG TH 記 E に FE に 4 ミ ピ 
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sm ビ ビビ TI ロロ N - コ 6 m タブ を 切り 換え た 場合 に 処理 を 行う 


}else{ マ | 
// ペー ジ が 表示 され だ た 場合 
ele.innerHTML += "ペー ジ が 前 面 に 出 ま し た "+dgte0b 二 "<br>": 

} 

// ペー ジ の 状態 を 表示 

ele.tnnerHTML += "vtstbitttyState:"+visState+"<hr>": 


} 
+。 faqtse): 


プラ ウザ で index.html を 表示 する と 、 ペー ジ が 前 面 に 出 て いる 状態 で 表示 され ます 。 ここ 
で タプ を 切り 換え ます 。 





Page Visp 還 ty APH サ ンプ ブル 


他 の タプ を 表示 し 、 再度 、 タブ を 切り 換え る と 、 いつ 切り 換え た か を 示す 時 間 、 お よび 、 状 
態 が 表示 され ます 。 


を 


委 書 の 出版 を 通じ て 人 が 事 ら し や すい 社会 作り に 仙南 し ます 。 


G9CsR 研 究 所 Wereuetsre ocey gh pubh 





Page Vispility APH サ ンプ ル 


ペー ジ が 隠れ まし た , Mon Jun 4 19.23-01 PDT 2012 
hidden 

生生 ジ が 前 面 に 出 まし た Mon Jun 4 19-23-06 PDT 2012 
visibilityState, visible 








必 戸 己 ロイ | 口 NN - ヨ 63 mw タブ を 切り 換え た 場合 に 処理 を 行う 


タブ が 切り 替わっ た と き に 処理 を 行う に は 
「visibilitychangel イ ベン ト を 使う 


Page Visibility API を 使う と 、 タブ が 切り 替わっ た 際 の イベ ント を 取得 し て 処理 を 行 
うこ と が で きま す 。 タブ が 切り 夫 わ る と 、| visibilitychange」 イ ベン ト が 発生 し ます 。 な お 、 
2012 年 7 月 時 点 で は ベン ダー プレ フィ ックス を 付け な いと イベ ント が 発生 し ませ ん 。 

ペー ジ が 表示 され て いる か どう か は 、|「document.hidden ]」 プロ パテ ィ で 確認 で きま 
す 。「true」 な ら 非 表示 、「 false」 な ら 表 示さ れ て いる こと に な り ま す 。 また 、| document. 
visibilityState」 プロ パテ ィ で も 確認 で きま す 。| documentL.visibilityState」 プロ パテ ィ 
の 場合 は 、 よ り 細 か い 状 態 を 知る こと が で きま す 。 | document.visibilityState」 プロ パ 
ティ は 、 次 の 表 に 示す 値 に な り ま す 。 


ロロ NEPO ロ INT 


"hidden" 
"visible" 
preview" 
'prerender" 


な お 、 ウィ ンド ウ が 切り 替わっ た 際 に 、 他 の アプ リケーション に 切り 奉 わ っ た 場合 は 、 
[visibilitychange」 イ ベン ト は 発生 し ませ ん 。 


関連 項目 ょ ゅ 





ゅ タイ マー な だ 疫 定 : 解除 する る 上 〇 ベト ドド ドド ドド ドド ドド ドー p.283 
ぁゃ イン ター 人 バル タイ マー を 設定 ・ 解 除 す る 人 im ドド "の の p.286 
e アニ メー ショ ン 同 期 タ ダイマー を 設定 ・ 解 除 す る …… で Ir p.289 
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LIE 10 ! Chrome ! Safari 5 | Firefox 4 ! Opera 12 ) 


BE 上 ビビ TI1HN- コ 6 人 4 


要素 を ドラ ッ グ で きる よう に する 











ここ で は 、 要素 を ドラ ッ グ で きる よう に する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttle>SqmpLe</t1tte> 
<Style> 
div { wtdth: 299px: hetght: 59px: 
background-color:#ffd: border:1px solid blgck: } 
</style> 
<SCr1Dt src="]S/sqmple.]S"></scrtpt> 
</hegd> 
<body> 
<h3>Drag aqnd Drop サ ンプ ル </h3> 
<div> ド ラッ グ 可 能 で す </div> 
<div> こ こ は ド ラッ グ で きま せん </div> 
<OUtDut キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow . gddEventListener("1oad" 。 functton(){ 
var dtv = document.getEtementsByTagName( "dtv")[9]: 
// Google Chrome, Safqrt。TIE19 の 場合 
dtv.draggablte = true: 
// Ftrefox の 場合 は 以下 が 必要 


div.qddEventLtstener("dragstart"。functton(Cevent){ 





evert .datgqTransfer.setData("text/platn"。 "dragTtem"): 
+, true): 
+, false): 


ブラ ウザ で index.html を 表示 する と 、 最初 の 黄色 い 背 景 の | div」 要素 の 領域 を ドラ ッ グ す 
る こと が で きま す 。 


IdVS き SNSGTN」 HEIETRZEEIW 
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生 ビビ ピロ TI 口 N - コ 6 wm 要素 を ドラ ッ グ で きる よう に する 






Drag and Drop サ ンプ ブル 


ラッ グ 可 能 で 


ここ (は ドラ ッ グ で き : 


mm 中 要素 を ドラ ッ グ で きる よう に する に は 「draggable」] プロ バ パティ を 使う 


「div」 要素 な ど 、 通常 ドラ ッ グ で き な い 有 要素 を ドラ ッ グ で きる よう に する に は 、 要素 
の | draggable」] プロ パテ ィ に | true」 を 指定 し ます 。 スク リプ ト で な く 、 HTML 要 素 に 
| draggable」 属性 を 指定 し て も る ドラ ッ グ 可能 に な り ま す 。 た だ し 、 Firefox に 関し て は 、 


「 dragstart」 イベ ント が 発生 し た ら 、| setData (0 」 メ ソ ッ ド を 使っ て デー タ を 設定 する 必 
妥 が あり ます 。 

| draggable」 プロパ ティ に | false」 を 設定 する と 、 その 有 要素 は ドラ ッ グ で き な く な り ま す 。 
な お 、「img」 要素 や 「a」 要素 の リン ク 、 テキ スト な ど 、 デフ ォ ル ト で ドラ ッ グ 可能 に な っ て い 
る 場合 は 、| draggable」 プロ パテ ィ に 「 false」 を 指定 し て も 効果 は あり ませ ん 。 





関連 項目 ょ ゅ 
3 要素 を ドラ ッ グ S&S ド ロッ プ で きる よう に する 50470 ああ の 本人 は D.864 
介 ドラ ッ グ 要素 か ら ド ロッ プ 要 素 に デー タタ を 渡す 本: 信二: を が (お 人 各 攻 電 02 D.866 
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LIE 10 Chrome Safari 5 | Firefox 4 』 Opera 12_ 


SE ED す 1EJN- コ らら 5 


要素 を ドラ ッ グ S ド ロッ プ で きる よう に する 











ここ で は 、 要素 を ドラ ッ グ & ド ロッ プ で きる よう に する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>SamplLe</tttle> 
<Style> 
dv {1 wtdth: 299px: hetght: 59px : 
bockground-color:#ffd: border:1px soltd blgck: } 
</style> 
<SCPtDt src="]s/sqmple.]S "></scrtpt> 
</hegd> 
ー <body> 
' <h3>Drag and Drop サ ンプ ル </h3> 
<dtiv> ド ラッ グ 項 目 </div> 
<divy こ こ に ドロ ッ プ で きま す </div> 
<OuUtDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .gddEventLtstener("1ogd" functton(){ 





var ele = document.getElementsByTagName( "output")[9] : 





var div = document.getElementsByTagName( "div")[9] : 
var dropAreg = document.getEtementsByTagName( "dtv")[1] : 
// Google Chrome, Safgrt, IE19 の 場合 





dtv.draggable = true: 

// Ftrefox の 場合 は 以下 が 必要 

div.qddEventLtstener( "dragstart"。 functton(Cevent){ 
evert.dataTragnsfer.setData( "text/ptatn",。 "dragTtem"): 

+ 。 true): 

// ドロ ッ プ 領域 に 入っ た 場合 の 処理 

dropArea .qddEventLtstener( "dragover",。 functton(event){ 
// 背景 色 を 変え る 
thts.style.backgroundColor = "orange": 
// デフ ォ ル ト の イベ ント 動作 を 禁止 する 
evert.preventDefqult( ): 
ele.tnnerHTML = "ドラ ッ グ 要素 は ドロ ッ プ 領域 内 で す ": 

} 。 true ): 

// ドロ ッ プ 領域 か ら 離 れ た 場合 の 処理 

dropAreq .qddEventLtstener("dragleave" , function(event){ K4 


ldvS き SSSnn | 証 計 ee 
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生 ビビ ピロ TI 口 N- ヨ 65 m 要素 を ドラ ッ グ S ド ロッ プ で きる よう に する 


// 背景 色 を 変え る 3 
thts .style .backgroundCotor = "#ffd"・ 
// デフ ォ ル ト の イベ ント 動作 を 禁止 する 
evert.preventDefault(): 
ele.innerHTML = "ドロ ッ プ 領域 か ら 離 れ ま し た ": 

}。 true): 

// ドロ ッ プ し た 場合 の 処理 

dropAreaq .addEventLtstener("drop" , functton(Cevent){ 
// デフ ォ ル ト の イベ ント 動作 を 禁止 する 
evert.preventDefault( ): 
ele.itnnerHTML = "ドロ ッ プ し まし た 。 "+Cnew Date)): 

}, true): 

}+, false): 


ブラ ウザ で index.html を 表示 し 、 最初 の 黄色 い 育 景 の | div」 要素 の 領域 を ドラ ッ グ し て 、 
下 の |div」 要素 に ドロ ッ プ 領域 に 重ね る と 育 景色 が 変化 し 、 ドロ ッ プ する と 、 ド ロッ プ し た 日 時 
が 表示 され ます (日 時 の 表示 形式 は プラ ウザ に よっ て 異な る ) 。 







Drag and Drop サ ン ブ ル 


Drag and Drop サ ンプ ル 


こ 。 Tue Jul 31 12-40-19 PDT 2012 


=mNI ヨ mlINl 画 ドロ ッ プ 側 の 処理 は 「dragover」 「dragleave」 「drop」 イ ベン ト を 使う 


| draggable 」 プロ パテ ィ に | true」 を 指定 すれ ば 要素 を ドラ ッ グ する こと は で きま す が 、 
ドロ ッ プ 側 の 処理 は 、 次 の イベ ント に 対し て 処理 を 行う 必要 が あり ます 。 | dragleave」 イ 
ベン ト は 省略 し て も 動作 し ます 。 


要素 が ドロ ッ プ 領 域 に 重なっ た (必須 ) 
要素 が ドロ ッ プ され た (必須) 





関連 項目 p 
『 要素 を ドラ ッ グ で きる よう に する ei 他人 204. 党首 な 語る (55 季 仙人 D.86 
に 1 ドラ ッ グ 要素 か ら ド ロッ プ 要 素 に デー タ を 渡す の D.866 
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LChrome 」 Safari 5 | Firefox 4 1 Opera 12 」 


=1 ゴ malmlN 四 cT=T= 
ドラ ッ ク 要 素 か ら ド ロッ プ 有 要素 に デー タ を 渡す 


ここ で は 、 ド ラッ グ 要 素 か ら ド ロッ プ 要 素 に デー タ を 渡す 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metqg charset="utf-8"> 
<tttle>Sqamp Le</t1t1e> 
<Style> 

dtv { wtdth: 299px: hetght:59px : 
background-color:#ffd: border:1px solid blagck: + 

</style> 
<SCr1Dt Src="]S/Sample . ]S "></SCr1Dt> 

</head> 

<body> 
<h3>Drag デ ー タ の 受け 渡し </h3> 
<d1tv>mmz- 7 の 9</d1V> 
<dtv>PC-6991</d1v> 
<div id="dropbox"> こ こ に ドロ ッ プ で きま す </div> 
<OUtDuU キ ></OutDut> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


window.addEventListener("toad"。 functton(){ 
wtndow .qddEventLtstener("1ogd" 。 functton(){ 
var ele = document .getELementsByTagName( "output") う [9] : 
var dtv = document.getEtementsByTagName( "dtv"): 
// ドロ ッ プ エリ ア を 読み 出し 
var dropArea = document.getELementByTd( "dropbox"): 
ドラ ッ グ する div 有 要素 の 数 だ け イ ベン ト を 設定 
forCvar 1= の 9: 1<Z2: 1++)† 
div 要 素 を ドラ ッ グ 可能 に する 
div[1] .draggable = true: 
ドラ ッ ク 開 始 時 の 処理 を 設定 
div[1] .addEventListener( "dragstart"。 functton(event){ 
ドロ ッ プ 先 に 渡す デー タ を 設定 。 div の 内 容 を 渡す 
evert.dataqTraqnsfer.setDatag( "text/platn", thts .tnnerHTML ) : 
+, true): 
} 
// ドロ ッ プ 領域 に 入っ た 場合 の 処理 


dropArea . addEventLtstener("dragover"。 function(event){ 
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生 ビビ ロ 丁 | 口 N| - ヨ 66 mw ドラ ッ グ 要素 か ら ド ロッ プ 要 素 に デー タタ を 渡す 


// デフ ォ ル ト の イベ ント 動作 を 禁止 する 公 人 
evert.preventDefault( ): 
す , true): 
// ドロ ッ プ 領域 か ら 離 れ た 場合 の 処理 
dropArea . addEventLtstener("dragtLeave" 。 functton(event){ 
// デフ ォ ル ト の イベ ント 動作 を 禁止 する 
evert. preventDefault( ): 
+。 true): 
// ドロ ッ プ し た 場合 の 処理 
dropArea.addEventLitstener("drop" , functton(Cevent){ 
// デフ ォ ル ト の イベ ント 動作 を 禁止 する 
evert .preventDefault( ): 
// 渡さ れ た デー タ を 読み 出す 
var text = evernt.dataTransfer .getData( "text/pLatn"): 
ele.itnnerHTML = "ドロ ッ プ 完了 。 渡さ れ た デー タ :"+text: 
+。 true): 
+,。 false): 


プラ ウザ で index.html を 表示 し 、1 番 目 か 2 番目 の | div」 要素 の 領域 を ドラッグ し て 一 番 下 の 
「divy」 要素 に ば ドロップ する と 、 ド ロッ プ 先 に は 「div」 要 素 内 に 表示 され て いる テキ スト デー タ が 
渡さ れ 、 内 容 が 表示 され ます 。 
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まき 戸 ビビ ピ T「 口 N!| - コ 66 mw ドラ ッ グ 要素 か ら ド ロッ プ 要 素 に デー タ を 渡す 


miiaalsllN 形 テー タ を 受け 渡す に は 「setData()」 メソッド を 使う 


ドラ ッ グ 元 の 要素 か ら ド ロッ プ 先 の 要素 に デー タ を 渡す に は 、「setData() 」 メ ツ を 使 
いま す 。 | setData () 」 メ ソ ッ ド の 最初 の パラ メー タ に MIME タ イプ 、2 番 目 に 渡し た い デ ー 
タ を 指定 し ます 。 2 番目 の デー タ は 、 最初 の パラ メー タ に 指定 し た MIME タ イプ に 対応 し 
だ た も の に な り ま す 。 

ドロ ッ プ 移 で は 、| getData() 」 メ ソ ッ ド を 使っ て デー タ を 受け 取る こと が で きま す 。 
| getData() 」 メ ソ ッ ド の パラ メー タ に は 、 受け 取り た い デ ー タ の MIME タ イプ を 指定 し ま 
す 。 標準 テキ スト で あれ ば 、「text/plaim」 を 指定 し ます 。 

サン プル で は 、 ペー ジ 内 に ある 要素 の デー タ だ け で な く 、 他 の アプ リケーション か ら の 
デー タ も ドロ ッ プ する こと が で きま す 。 その 際 、 アプ リケーション か ら 渡 され た デー タ が 表示 
され ます 。 





関連 項目 ょ ゅ 


@$ ファ イル 名 や 種類 を 取 旨 する ひい ドリ トド tioimomrtmー… ド ドド ドド ーーーーーー p.680 
ププ キス トウ ア ァイル 到 凌 天 送 二 0 6 誠に 全 か AA の が WADADOT い 、、 p.683 
e バイ ナリ ファ イル を 読み 込む eonet p.685 
志和 M け ア た 信 状 eK p.687 


き 要素 を ドラ ッ グ で きる よう に する が 6 生み 休ま hg が も 人 NO RW p.868 
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=1 コ mmlmINBcT=y。 
通知 可能 か どう か 調べ る 


ここ で は 、Web Notifications API を 利用 し て 通知 可能 か 調べ る 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttte>SqmpLe</t1tle> 
<SCrtDt Src="]S/Sample.]S"></SCr1Dt> 
</head> 
<body> 
<h3>Web Notificattons サ ンプ ル </h3> 
< く OUtDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .qddEventLtstener( "load" ,。 functton(){ 
var ele = document.getElementsByTagName( "output")[9] : 
// Google Chrome, Safari 6 の 場合 
if (webkttNottficattons)1 
ele.tnnerHTML = "Web Nottficgtions APT は 使用 で きま す <br>": 
// 通知 状態 を 取得 
var stgt = webkttNottftcattons . CheckPermtsston( ): 
// 通知 状況 を 表示 
ele.innerHTML += "状態 :"+stat+"<br>": 
// 通知 が 許可 され て いる か 調べ る 
tfCstat == 1){ 
// 許可 する よう に 要求 する 
webkttNottftcottons . requestPermtsston(functton( ){ 
// 通知 状態 を 取得 し て 画面 に 表示 
var stat = webkttNottftcattons . checkPermtss1on( ): 
ele.innerHTML += "現在 の 状態 : "+stat: 
) う : 
} 
+elset 
ele.innerHTML = "Web Notificgtions API は 使用 で きま せん ": 
} 
}, faqlse): 
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還 ビビ ピ TI ロ HHN- コ 67 通知 可能 か どう か 調べ る 


プラ ウザ で index.hetml を 表示 する と 、Web Nofitication API を 利用 し て 処理 を 行う 場合 、 
設定 や プラ ウザ に よっ て は 確認 の ダイ アロ グ が 表示 され ます 。 


ao 
3 と 


(RT E は そ 、 ye SV ん " 入 
玉 www.openspc2.org/ C 
と の | 143 あ 0 * | : Ii ま 線 】 01 | y か 5 ん 1 は 3 に まう に 4 人 


(Or 


| 
ネイ 者 人 





| 許可 」 ボ タン と | 許可 し な い 」 ボ タン の どちら を 選択 し て も コー ル バ ッ ク 関 数 が 呼び 出さ れ 、 
Web Notifications の 状態 が 表示 され ます 。 





Q Coogle で 検索 、 ま た は アド レス を 入力 し ン 


Web Notifications サ ンプ ブル 


Web Notifications API は 使用 で きま す 


通知 が 利用 で きる か どう か は 
「webkitNotifications]」 オ ブ ジ ェクト の 有無 で 調べ る 

画面 の 隅 に メッ セー ジ を 表示 する (通知 する ) に は 、 Web Notifications API を 利用 
し ます 。 Web Notifications API が 利用 で きる か どう か は 、| webkitNotifications」 オ ブ 
ジェ クト の 有無 で 調べ る こと が で きま す 。 オブ ジェ クト が あれ ば 使用 可能 、 な けれ ば 使 用 
する こと は で きま せん 。 

また 、 ユ ー ザ ー が 通知 を 許可 し て いな い 場 合 は 、 使 用 する こと が で きま せん 。 ユー ザー 
が 許可 し て いる か どう か は 、| checkPermission () 」 メ ソ ッ ド で 調べ る こと が で きま す 。 返 
され る 数 値 と 内 容 は 、 次 の 表 の よう に な り ま す 。 な お 、 Safari 6 で は 通知 を 許可 し て いる 
場合 で も |「1」 を 返す こと が あり ます 。 


に IEII に 邊 | 


_default' 


"denied" 通知 を 許可 し て いな い 
"granted" 通知 は 許可 され て いる 


通知 を 許可 する よう に 要求 する 場合 は 、| requestPermission () 」 メ ソ ッ ド を 使い ます 。 
許可 / 不 許可 に 関係 な く 、 パラ メー ター に 指定 し た コー ル バ ッ ク 関 数 が 呼び 出さ れ ま す 。 





き 王 ロロ TI 口 N - ヨ 67 プ m 通知 可能 か どう か 調べ る 


mm 間 和 IN 較 Safari 6 で の 動作 に つい て 


Safari 6 の 場合 、 Web Notifications API は 、OS X 10.8(Mountain Lion) か ら 追 
加 さ れ た 通知 セン ター の 機能 を 使っ て いま す 。 この た め 、 OS X 10.7(Lion) の Safari 6 
で は 動作 し ませ ん 。 869-878 ペ ー ジ の サン プル の 動作 を Safari 6 で 確認 する 場合 は 、 
OS X 10.8(Mountain Lion) 上 で 確認 し て くだ さい 。 


miml 画 IIN 還 (OOEIG ChrOme で の 動作 に つい て 


Google Chrome の デフ ォ ル ト で は 、 サイ トト が 通知 を 表示 し よう と し た と き に ペー ジ の 上 
部 に 確認 メッ セー ジ が 表示 され 、 ユー ザー が | 許可]」 ボ タン を クリ ッ ク す る と 、 通知 を 利用 
で きる よう に な り ま す 。 た だ し 、 2012 年 7 月 現在 、 通知 を 利用 する サイ ト に アク セス し た だ け 
で は 確認 メッ セー ジ が 表示 され ませ ん (ユー ザー の クリ ッ ク な ど が 必要 )。 その た め 、 869 
ー878 ペ ー ジ の サン プル の 動作 を 確認 する に は 、 通知 の 表示 を 許可 する よう に 設定 を 変 
更 する 必要 が あり ます 。 設定 を 変更 する に は 、 次 の よう に 操作 し ます 。 
⑱⑳ ツー ル バ ー の レン チア イコ ン を クリ ッ ク し て [設定] を 選択 し ます 。 

@②@ ペー ジ 下 部 の 「 詳 細 設定 を 表示 」 を クリ ッ ク し ます 。 

⑥ 「 プ ライ バシ ー」 の [コン テン ツ の 設定 ] ボ タン を クリ ッ ク し ます 。 

@ [通知 | で [すべ て の サイ ト に デス クト ッ プ 通知 の 表示 を 許可 する ] を ON に し て 、[OK] ボ タ 
ン を クリ ッ ク し ます 。 






















な お 、 サン プル の 動作 確認 が 終わ っ た ら 、 セキ ュ リ ティ の た め 、 元 の 設定 に 戻す よう に 
し て くだ さい 。 また 、 ロ ー カ ルディ スク 上 で は 正しく 動作 し な いた め 、 ネ ットワーク 環境 (Web 
サー バー 上 ) で 確認 する よう に し て くだ さい 。 


関連 項目 ! 


『] 通知 する NNKANINMS 生 b サ せつ イセ ジジ ザー の ツジ で か の か すす て で で て サン サゲ ペイ イト ん D.87 ら 
っ PPP DRYNT 訟 0 HUYPUHY わ DF p.874 
e 通知 に 関す る イベ ント を な 処理 する ooo p.876 
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LChrome 1 Safari 6 」 


=1 ゴ FilmlN 昌 cf=1= 
通知 する 


ここ で は 、Web Notifications API を 利用 し て デス クト ッ プ 上 に 通知 する 方 法 に つい て 解説 
し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 2 で 「 
<html> . 
<head> Me 
<meta Charset="utf-8"> 
<title>SqmplLe</t1tt1e> 





敵 <SCr1Dt Src="]S/sqmpLe.]S "></scrtpt> 
間 </heod> 
ーー うと 

コ <h3>Web Notificqtions サ ンプ ル </h3> 
<p> ア クセ ス 時 の 時 間 を 通知 し ます </p> 
| </body> 
</html> 


JavaScript の コー ド (sample.js) 
wtndow.qddEventListener("1ogd", functton(){ 
// Google Chrome, Safart 6 で 使用 可能 な 場合 に 処理 
tf CwebkttNotiftcattons){ 
// 通知 する メッ セー ジ を 準備 
var messqge = "現在 の 時 間 :"+Cnew DateO): 
// 通知 を 行う 
var popup = webkttNotiftcations.createNottftcatton("icon.png", "時 間 ", message): 
// 画面 に 表示 
popup.show(O つ : 
) 
}, fatse): 


誠 HINIT| CA t 
: Safari 6 の 場合 、 OS X 10.8(Mountain Lion) 上 で の み 動 作 し ます 。 また 、 Google Chrome : 
で 動作 を 確認 する 場合 は 、 設定 を 変更 する 必要 が あり ます 。 それ ぞ れ 、 87 ] ペー ジ の COLUMN 

を 参照 し て くだ さい 。 


あま あま まま も まま まま も ま まま まま まま また た まま た まま まま た まま まま も ま まま まま まま まま まま まま すま すす ます ます ます すま すま すま すま すま すま すす すす さす ささ 
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天王 ロ 丁 | 口 N!|- コ 6 日 m 通知 する 


ブラ ウザ で index.html を 表示 し 、 ペー ジ が 読み 込ま れる と 、 その 時 点 で の アク セス 時 間 が 
通知 きれ ます 。 Mac の 場合 は 、 画面 石上 に 通知 が 表示 され ます 。 














ヤヤ 


人 


ーー っ ZD ーーーー ナ ーー 
Web Notifcatiions サ ンプ ブル 


アク セス 時 の 時 間 を 通知 し ます 







回 時 間 
現在 の 時 間 : Thu Aug 02 2012 16:33:03 GMT 
+0900 (ST) 


Windows 7 の 場合 は 、 画面 右 下 に 通知 が 表示 され ます 。 


トト ュー ーー MAA 人 まあ Ko 導 8u も 5 が 





時 間 
| 現在 の 時 間 : Thu Aug 02 2012 16.44-26 
GMT+0900 (東京 (標準 時 ) 








mNImlNl 画 通知 する に は 「createNotification()」 メソッド を 使う 


画面 の 隅 に メッ セー ジ を 表示 する (通知 する ) に は 、| createNotification()) 」 メ ノッ ド を 
使い ます 。 パラ メー タ は 3 つ あ り 、 最初 が アイ コン の URL、 2 番目 が タイ トル 、 3 番目 が 実際 
に 表示 する メッ セー ジ に な り ま す 。 

「createNotification () 」 メ ノッ ツ ド は 、 生 成 し た | Notificationm」 オ プ ジ ェ クト を 返し ます 。 こ 
の 段階 で は 、 通 知 は 表示 され ませ ん 。 デス クト ッ プ に 通知 を 表示 する に は 、| Notification」 
オブ ジェ クト の 「show() 」 メ ノッ ド を 実行 し ます 。 これ に より 、 通知 が 表示 され ます 。 

な お 、 Safari 6 で は アイ コン の URL を 指定 し て も 反映 され ず 、 Safari 6 の アプ リ ケ ー ン ショ 
ン ア イコ ン が 表示 され ます 。 










関連 項目 ょ ゅ 


s アラ ー ト ダイ アロ グ / 確 認 ダイ アロ グ / 入 力 ダ イア ログ を 表示 する …… の lm p.278 
e モーダ ル ダ イ アロ グ を 表示 する … ee p.28 1 
e 通知 可能 か どう か 調べ で る eee 0.869 
e 通知 を 消す ti D.874 
e 通知 に 関す る イベ ント を 処理 する …… ド inrrrrerrerrererrrrrrrr p.876 
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=1 ヨ mlmINEcT=1= 
通知 を 消す 


ここ で は 、 Web Notifications API を 利用 し て 表示 され て いる 通知 を 消す 方 法 に つい て 解 
説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<title>SqgmpLe</ttt1e> 
<ScPtPt src="]s/sqmple.]S"></scrtpt> 
</heqd> 











<body> 
<h3>Web Notificqtions サ ンプ ル </h3> 
<p> ア クセ ス 時 の 時 間 を 通知 し ます </p> 


<form> 
<tnput type="button" vglue=" 通 知 を 消す " 1d="hide"> 
</formm> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("togd" 。 functton(){ 
// Nottficgtion オ プ ジ ェ クト を 入れ る 変数 
Var POPuD = null: 
// Google Chrome, Saqfgri 6 で 使用 可能 な 場合 に 処理 
1f (webkttNottficattons){ 
// 通知 する メッ セー ジ を 準備 
vaor messaqge = "現在 の 時 間 :"+Cnew Date()): 
// 通知 を 行う 
POPuP = webkttNottftcqttons.createNottftcatton("tcon.png", "時 間 ", messqge): 
// 画面 に 表示 
POPuP . Show( ): 
} 
// ボタ ン に イベ ント を 割り 当て 
document.getElementByTd("htde").qddEventLtstener("cltck"。functton(){ 
// Nottftcation オ プ ジ ェ クト が 存在 する 場合 の み 処理 
1f (popup){ 
// 通知 を 消す 
POPuP . Cancel( ): 
} 
}, faqlse): 
}, false): 


を 
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mm 王 己 ロロ TI 口 N!|- ヨ 69 m 通知 を 消す 


回 上 回 回 

Safari 6 の 場合 、 0S X 10.8(Mountain Lion) 上 で の み 動 作 し ます 。 また 、 Google Chrome 
で 動作 を 確認 する 場合 は 、 設定 を 変更 する 必要 が あり ます 。 それ ぞ れ 、 87 1 ペー ジ の COLUMN 
を 参照 し て くだ さい 


ブラ ウザ で index.html を 表示 し 、 ペー ジ が 読み 込ま れる と 、 その 時 点 で の アク セス 時 間 カ 
出 知 され ます 。 


Sample 
と っ G Q 


Web Notifications サ ン ゴ ル 
アク セス 時 の 時 間 を 通知 し ます 


| 條 0 を 放す ) 


Www.OPenSDC2 OrO NX 


PP 時 間 
現在 の 時 間 :Thu Aug 02 2012 17:14:51 
GMT+0900 (東京 (標準 時 ) 





ボタ ン を クリ ッ ク す る と 、 通知 が 消え ます 。 


Sample 
と うっ う @GIQ 


Web Notifications サ ン ゴ ル 
アク セス 時 の 時 間 を 通知 し ます 


追 知 を 月 す 





mNI ヨ slSl 画 通知 を 消す に は 「cancel()」 メソッド を 使う 


画面 に 表示 され て いる 通知 を 消す に は 、 ドキ アプ 676 ) 」 メ 
ソ ッ ド を 使い ます 。「cancel() 」 メ ノッ ド が 呼び 出さ れる と 、 通知 は すぐ に 消去 され ます . 

な お 、 消去 され る の は 対応 する 通知 だ け で 、 すでに 表示 され in の 20 
- と は あり ませ ん 。 

な お 、 Safari 6 で は 通知 を 消せ な い 場 合 が あり ます 


IHVS 詩 ScNSGT]WA1H EE に IE に 4 ミド | 





関連 項目 pl 


生生 p.869 
e 通 知 する D.87 ら 
e 通知 に 関す る イベ ント を 処理 する iro p.876 


87S 


=1 コ lmINE に = 
通知 に 関す る イベ ント を 処理 する 


ここ で は 、Web Notifications API を 利用 し た 通知 に 関す る イベ ント を 処理 する 方 法 に つ 
いて 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttle>Sqmple</t1tle> 
<SCrtpt src="]S/sqmple.]S"></scrtpt> 

</head> 

<body> 
<h3>Web Notificaqttions サ ンプ ル </h3> 
<p> 通 知 に 関す る イベ ント を 表示 し ます </p> 
< く OUtDut キ ></OUtDut> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oqd", functtonC){ 
var ele = document .getEtementsByTagName( "output")[9] : 
// Google Chrome, Sgfart 6 で 使用 可能 な 場合 に 処理 
1f (webkttNottftcgttons ){ 
// 通知 する メッ セー ジ を 準備 
var messgge = "現在 の 時 間 :"+Cnew DateC)): 
// 通知 を 行う 
PopuP = webkttNottftcations .creoteNottftication("tcon.png", "時 間 ", meSSqge) : 
// 画面 に 表示 
Popup . Show(): 
// 通知 が 表示 され た 場合 の イベ ント を 設定 
POPup .Oonshow = functton(){ 
ele.tnnerHTML += "show: 通 知 が 表示 され まし た <br>": 
1 “ 
// 通知 が クリ ッ ク さ れ た 場合 の イベ ント を 設定 
POPuP .Oncltck = functton(){# 
ele.innerHTML += "click: 通 知 が クリ ッ ク さ れ ま し た <br>": 
} 
// 通知 が 消え た 場合 の イベ ント を 設定 
Popup.onclose = functton(){ 
ete.tnnerHTML += "ctose: 通 知 が クロ ー ズ され まし た <br>": 
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mW ビビ ピ TI ロ NI- ヨ プロ Wm 通知 に 関す る イベ ント を 処理 する 
}, false): 「 マ 


貼 由 加 … 


Safari 6 の 場合 、 0S X 10.8(Mountain Lion) 上 で の み 動 作 し ます 。 また 、 Google Chrome 
SR 設定 を 変更 する 必要 が あり ます 。 それ ぞ れ 、 87 1] ペー ジ の COLUMN 
を 参照 し て くだ さ 


ブラ ウザ で index.html を 表示 し 、 通知 が 表示 され る と 、 イベ ント が 発生 し ます 。 イベ ント が 発 
生 す る と 、 ペー ジ 上 に メッ セー ジ が 表示 され る ます . 


Web Notifications サ ンプ ゴル 
通知 に 関す る イベ ント を 表示 レ し ます 


show: 通知 が 表示 され まし た 
WWW_ODGPSD て 3 OrO 0。 


時 間 
現在 の 時 間 :Thu Aug 02 2012 17-33-39 
GMT+0900 (東京 (標準 時 )) 





通知 上 で クリ ッ ク す る と イベ ント が 発生 し 、 ペー ジ 上 に メッ セー ジ が 表示 され ます 。 


民 Sample 


> GA 


Web Notifications サ ンプ ゴル 
通知 に 関す る イベ ント を 表示 し ます 


show: 通 知 が 表示 され まし た 
click: 通 知 が クリ ッ ク さ れ ま し た 


WWVw.ODGnSDC2 OTd へ ※ 


時 間 
現在 の 時 間 : Thu Auq 02 2012 17-33-39 
GMT+0900 (東京 (標準 時 )) 





通知 を 閉じ る と イベ ント が 発生 し 、 ペー ジ 上 に メッ セー ジ が 表示 され ます 
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WW 王 ビ ロ TI ロ NN - ヨ プロ mW 通知 に 関す る イベ ント を 処理 する 


Sample 
と っ う @Glo 


Web Notifications サ ン ブ ゴル 
南 知 に 関す る イベ ント を 表示 し ます 


5wi: 通 穫 が 表示 され まし た 
ck: 通 知 が クリ ッ ク さ れ ま し た 
ck: 通 知 が クリ ッ ク さ れ ま し た 


ド 
( 








通知 に 関す る イベ ント を 処理 する に は 
「Notification]」 オ ブ ジ ェクト の イ ベン ト を 利用 する 。 





ーーー] 


























通知 に 関す る イベ ント を 処理 する に は 、「 Notification 」 オ プ ジ ェ クト の イベ ント を 利用 し | 
ます 。 用 意 さ れ て いる イベ ント は 、 次 の よう に な り ま す 。 | 
通知 が 表示 され た | 
通知 が クリ ッ ク さ れ た 
通知 が クロ ー ズ され た (消え た ) 
Show と 同じ (現在 は 仕様 外 ) 
これ ら の イベ ント は 、| onshow」 の よう に 、「on」 を 付け た プロ パテ ィ に イベ ント ハン ドラ を 
| 設定 し ます 。 
な お 、 Safari 6 で は 通知 に 関す る イベ ント を うま く 処 理 で き な い 場合 が あり ます 。 
証 関連 項目 ゅ | 
= @ 用 050UHEI2NRS 旨 生計 D.396 
3 の こ ア タニ あて っ 得 R22A2k2C31 の 人 の PH p.398 
= 6 通知 可能 か どう が か が 剛 べ る OO ぇ 】 つ 7?? ぇ ヲ ぇ ヨ _】 ぇ ワ ぇ zz 々 ? 々 ze D.869 
3 凍 知 する ぐも の め る 人 0 を: 人 '6:9 あ 信金 2 ああ D.8/ の 
あ 通知 を 消す た em すめ 涼 洒 入村 な 和 欄 D.8/4 
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LIE9 Chrome 』 Safari 5 | Firefox 4 | Opera 11 | iOS4 1 Android2 1 WP」 


=1 コ mmlmlNEc レ 4 
スタ イル シー ト を 生成 する / 読 み 込む 


| ここ で は 、 すでに 存在 する ペー ジ 内 に お いて 新た に スタ イル シー ト を 生成 する 方 法 と 、 CSS 
ロ | ファ イル を 読み 込ん で スタ イル を 追加 する 方 法 に つい て 解説 し ます 。 


HTML(index.html) 


MI <!DOCTYPE html> 
<html> 
ト <heqd> 
<metg charset="utf-8"> 
| <ttt1e>Sqmple</tttle> 
員 <SCPrtDt Src="]S/sample.]S "></SsCr1Dpt> 
| </hegd> 
記 <h1>CSS を 追加 </h1> 
<formW> 
<tnput type="button" vatue="CSS 追 加 " 1d="addBtn"> 
<tnput type="button" vaqtue="CSS フ ァイル 読み 込み " id="1ogdBtn"> 
1 </form> 
Ni AM 
TDN </htmtl> 


3 JavaScript の コー ド (sample.js) 


wtndow.ontoad = functton()+ 
ーーー // CSS 追 加 ボ タン に イベ ント を 設定 
N | document .getEtementById( "addBtn") .gddEventLtstener("ctick"。functton(){ 
// style 要 素 を 生成 
| Var cssELle = document.createElement("style"): 
// CSS の プロ パテ ィ と 値 を 設定 
cssEte.1nnerText = cssEle.textContent = "h1 { color: red: }": 
// hegd 要 素 の 末尾 に 追加 Cscoped 属 性 な し ) 
documert.getElLementsByTagName( "head")[9] .oppendChttdCcssEte): 
+。 false): 
// CSS フ ァイル 読み 込み ボタ ン に イベ ント を 設定 
document.getElementByTd( "toadBtn") .oddEventLtstener("clitck"。function(){ 
// ttnk 要 素 を 生成 
var ltnkEte = document.createElement("1ink"): 
// rel 属 性 と CSS フ ァイル の URL を 設定 
tltnkEte.rel = "stylesheet": 








習 口 || 











ト 





テー ビー たま 導 こ に 4 Sm 


ttnkEle.href = "css/matn.Css": 

// hegd 要 素 の 末尾 に 追加 

documert.getEtementsByTagName("head")[9] .qppendChitdCtitnkEte): 
+,fqlse): 


mm ビ ビビ TI ロ N- ヨ 7 1 m スタ イル シー ト を 生成 する / 読 み 込む 


ブラ ウザ で index.html を 表示 し 、| CSS 追 加 」 ボ タン を クリ ッ ク す る と 、| style」 要素 が 作成 さ 
れ て 見 出し の 文字 の 色 が 赤色 に な り ま す 。 





また 、| CSS フ ァイル 読み 込み 」 ボ タン を クリ ッ ク す る と 、| link | 要素 が 作成 され ん て スタ イル シー 
ト フ ァイル が 読み 込ま れ 、 見 出し に 青い 下線 が 追加 され ます 。 


スタ イル シー ト を 生成 し た り 読 み 込 ん だ りす る に は 
「document.createElement()」 メソ ッ ド を 使う 


スタ イル を 新た に 追加 ・ 作 成す る に は 、「document.createElement() 」 メ ノッ ド を 使い 、 
[style」 要素 を 作成 し ます 。 スタ イル シー ト に 設定 する 内 容 を | style」 要 素 の | innerText」 
プロ パテ ィ や 「textContent」 プ ロ パ ティ に 設定 し ます 。 

すでに 用 意 さ れ て いる CSS フ ァイル を 読み 込む 場合 は 、| documentcreateElement()」 
メソ ッ ド を 使い 、[「jink」 要 素 を 作成 し ます 。「rel」 属 性 に は | stylesheet」 の 文字 を 、| href」 
属性 に は CSS フ ァイル の URL を 指定 し ます 。 

| style」 要素 、| iink」 要 素 と も 、| appendChild () 」 メ ソ ッ ド を 使っ て ペー ジ 内 に 追加 し 
沙 す 。 

な お 、 IE6 以 降 で は 、| document.createStyleSheet() 」 メ ソ ッ ド を 使っ て 、 CSS フ ァ イ 
ル を 追加 する こと が で きま す 。 また 、 CSS の 内 容 を 示す | cssText」 プ ロ パ ティ も あり ます 。 
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LIE9 1 Chrome 」 Safari 5 』 Firefox 4 1 Opera11 1 iOS4 | Android2 WP_ 


cb ま 1EJIN- は / 2 


スタ イル シー トブ プロ バテ ィ の 値 を 設定 する 








ここ で は 、 スタ イル シー ト プ ロ パテ ィ の 値 を 設定 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<tttle>Sqmple</t1t1e> 
<SCP1Pt src="]s/sqmple.]S"></scrtpt> 
</head> 
<body> 
<h1>CSS プ ロ パ ティ の 値 を 設定 </h1> 
<form> 
<tnput type="button" vaqlue=" 見 出し 色 を ラン ダム に 設定 " 1d="setBtn"> 
<tnput type="button" vaqtue=" 色 を 読み 出す " id="getBtn"> 
</form> 
<OutDu キ ></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.j5) 


wtndow . addEventLtstener("toad"。 functton(){ 

// ボタ ン に イベ ント を 設定 

documernt .getELementById("setBtn").gddEventLitstener("cltck"。 functton(){ 
// h1( 見 出し ) 要 素 を 読み 出し 
var h1Ete = document.getELementsByTagName( "h1")[9]: 
// ラン ダム な 色 を 算出 
var r = Math.floor(Math. random() * 255): 
var g = Math.floor(Moth. random() * 255): 
var b = Math.ftloor(Math. random() * 255): 
var RGBcolor = "rgb(C"+ ロ m+ リリ +g+" リ ォ B+" う ": 
// h1 の 文字 色 の プロ パテ ィ を 設定 
h1Ele.style.color = RGBcotor: 

}, fgqlse): 

// ボタ ン に イベ ント を 設定 

document.getELementByTd("getBtn") .qddEventListener("cLtck"。 functton(){ 


ロ 
2 
1 
ゴ 
m 
ミ 





テナー 定 へ 2 


var ele = document.getEtementsByTagName( "output")[9] : 
// h1( 見 出し ) 要 素 を 読み 出し 
var h1Ele = document.getEtementsByTagName( "h1")[9] : 
// h1 の 文字 色 を 読み 出し て 表示 
ele.tnnerHTML = h1Etle.stytle .color: 
+, foqlse): 
},。 false): 


882 


還 己 ビ ロイ T| 口 内 - ヨ プラ W スタ イル シー ト プ ロ パテ ィ の 値 を 設定 する 


ブラ ウザ で index.html を 表示 し 、| 見 出し 色 を ラン ダム に 設定 」 ボ タン を クリ ッ ク す る と 、 見 出 
し の 文字 の 色 が ラン ダム に 変わ り ま す 。 


| CSS プ ロ パ ティ の 値 を 設定 “ 





また 、| 色 を 読み 出す ] ボ タン を クリ ッ ク す る と 、 見 出し の 文字 の 色 が 表示 され ます (初回 を 
除く ) 。 


CSS プ ロ パ テイ の 侍 を 古 


rgb(4.162.38) 。 


TIN5a スタ イル シー ト プ ロ バテ ィ の 値 を 設定 する に は 
要素 の 「style」 オ ブ ジ ェクト の 各 プ ロバ ティ に 値 を 書き 込む 


スタ イル シー ト プ ロ パテ ィ の 値 を 設定 する に は 、 要素 の | style」 オ ブ ジ ェクト の 各 プ ロ パ 
ティ に 値 を 書き 込み ます 。 た と えば 、 文字 の 色 で あれ ば 、| color」 プ ロ パ ティ に カラ ー 名 や 
カラ ー コ ー ド を 設定 し ます 。 CSS プ ロ パ ティ で 設定 で きる 形式 と 同じ で す 。 また 、 背景 色 を 
表す [background-color」 の よう に 、 CSS で は 「-」 (ハイ フン ) が 入っ て いる 場合 は | -」 を 削 
除 し 、 直後 の 文字 を 大 文字 し た も の が TavaScript で の プロ パテ ィ 名 に な り ま す 。「 back 
ground-color」 の 場合 は 、| backgroundColor」 プ ロ パ ティ に アク セス する こと で 背景 色 を 
変更 する こと が で きま す 。 

「style」 オ ブ ジ ェクト に は 、 書き 込ん だ 値 が 保持 され て いま す 。 書き 込ん で いな い 場 合 

に は 、「style」 オ プ ジ ェクト 内 の プロ パテ ィ を 読み 出し て も 期待 する よう な 結果 を 得る こと は 
で きま せん 。 
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LIE9 1 Chrome 1 Safari 5 | Firefox 4 1 Opera 11 1 iOS4 Android2 1WP_ 


=1 ヨ malmINE に レ た 
スタ イル シー ト の 値 を 読み 出す 


ここ で は 、 スタ イル シー ト の 値 を 読み 出す 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<htmtl> 








<head> 
<metq charset="utf-8"> 
<tttle>SqmpLe</ttt1e> 
<SCr1Dt Src="]S/sqmple.]S"></scrtpt> 
</head> 
<body> 
<h1>CSS プ ロ パ ティ の 値 を 読み 出し </h1> 
<for> 
<tnput type="button" value=" 読 み 出 し " 1d="getBtn"> 
</form> 
<OutDut></OutDut> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oqd", function(){ 
// ボタ ン に イベ ント を 設定 
document .getEtementById("getBtn") .addEventLtstener("click",。 functton(){ 
var ele = document.getELementsByTagName( "output")[9] : 
// h1( 見 出し ) 要 素 を 読み 出し 
var h1Ele = document.getELementsByTagName("h1")[@] : 
// h1 の 文字 色 を 読み 出し て 表示 





var dotq = document.defqultVtew.getComputedStyleCh1Ete, ""): 
// 各 プ ロ パ ティ を 読み 出し 
E ele.tnnerHTML = "Left : "+datq.getPropertyVatue("1eft"): 
1 etle.tnnerHTML += "<br>top : "+data.getPropertyVatue( "top"): 
P 1 ele.tnnerHTML += "<br>wtdth : "+data.getPropertyVatue( "wtdth"): 
マ etle.innerHTML += "<br>height : "+data.getPropertyVatue( "hetght"): 
ル etle.tnnerHTML += "<br>cotor : "+data.getPropertyValue("cotor"): 
| elte.tnnerHTML += "<br>background-color : "+datg.getPropertyValue( "background-color"): 
ド +。 foalse): 
} 。 false): 
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mm ビ ビビ TI ロロ N- ヨ コワ プ 3 ヨ mw スタ イル シー ト の 値 を 読み 出す 


ブラ ウザ で index.html を 表示 し 、| 読み 出し 」 ボ タン を クリ ッ ク す る と 、 見 出し の プロ パテ ィ が 
読み 出さ れ て 表示 され ます 。 


| CSS プロ パテ ィ の 値 を 読み 出し 


left - anto 

tOD - autO 

width - 339px 

height - /3.6px 

color - rgb(0.0.0) 
background-color - transparcnt 


スタ イル シー ト の 値 を 読み 出す に は 
mM 要素 の [style」 オ ブ ジ ェクト の 各 プ ロバ ティ を 参照 する 


スタ イル シー ト の 値 を 読み 出す に は 、 要素 の 「style」 オ プ ジ ェ クト の 各 プ ロ パ ティ を 参照 
し ます 。 た だ し 、「style」 オ ブ ジ ェクト の 各 プ ロ パ ティ を 参照 し た 場合 、 実際 に 設定 され て 
いる 値 と は 異な る 場合 が あり ます 。 

実際 に 適用 きれ て いる 値 を 取得 し た い 場 合 は 、| documentdefaultView.getComputed 
Style() 」 メ ノド を 使い ます 。 最初 の パラ メー タ に は 要素 を 、 2 番目 の パラ メー タ に は 疑似 要 
素 を 指定 し ます 。 疑似 要素 を 指定 する 必要 が な い 場 合 は 、 空 文字 (また は | null」) を 指定 
し まず す 。 

また 、| documentdefaultView.getComputedStyle () 」 メソ リッ ド で は な く 、| window. 
getComputedStyle () 」 と 記述 する こと も で きま す 。 














貼 放 引 三 四 用 2 


ぁ スタ イル シー ト プ ロ パテ ィ の 値 を 設定 する 上 ……(lii imimrtmhtrtmt p.882 
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テー ヘッ に まき に 4 ェ に | 


ンス | 


LIE6 』Chrome Safari 5 」 Firefox 4 1 Opera 11 1 iOS4 I Android2 1 WP 」 


BE じじ 11HN- コ グイ 


文字 の 色 を 変更 する 


ここ で は 、 スタ イル シー ト で 文字 の 色 を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<metq Charset="utf-8"> 
<tttle>Sqmple</t1 せ 1e> 
<SCrtDt Src="]S/Sqmple.]S"></scrtpt> 
</hegd> 
<body> 
<h1> 文 字 の 色 を 変更 </h1> 
<form> 
<tnput type="button" vgtue="CSS を 変更 " 1d="change"> 
</form> 
<div> 較 還 呈 Somple Text 田 還 較 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oagd"。 functton()# 
// ボタ ン に イベ ント を 設定 
document.getELementByTd( "change").qddEventListener("ctick", functton(){ 
// dv 要素 を 読み 出し 
var divELement = document.getElementsByTagName( "dtv")[9] : 
// 文字 色 を 設定 
dtvElement.style.color = "rgbao(255。9, 9, 9.5)": 
+, fgqlse): 
}。 foqlse): 





プラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 文字 の 色 が 変更 され ます 。 





テー ビビ へ > に に ま に 4 ミ | 


文字 の 色 を 変更 文字 の 色 を 変更 


で こい 二 - 7 寺 』 ド で っ RE に 





mmm Sample TeXt 重 末 生 林 本 や ahDlc |cXt 王 礎 
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m ビビ ロ 丁 | 口 N- ヨ ワイ m 文字 の 色 を 変更 する 


mNsll 画 又 字 の 色 を 変更 する に は スタ イル シー ト の 「color」 プロ パティ を 使う 


文字 の 色 を 変更 する に は 、 スタ イル シー ト の 「color」 プ ロ パ ティ に 色 を 示す カラ ー 名 や 
カラ ー コ ー ド を 指定 し ます 。 カラ ー 名 は 、「red」 や 「blue」 な どの 文字 列 を 指定 する こと が 
で きま す 。 また 、 RGB で の 指定 や HSL 指 定 も 可能 で す 。 指定 可能 な カラ ー 形 式 は 、 次 
の 表 の よう に な り ま す 。 


[red」 や 「green] な ど 、 あら か じ め 定 義 さ れ て い 
る 文字 列 
16 進 数 6 桁 で HGB の 輝度 を 指定 (00ff 


16 進 数 3 桁 で HGB の 輝度 を 指定 (0~-1) 
rgb ( 赤 , 緑 , 青 ) 0-255 ま で の 輝度 を 指定 。 % で の 指定 も 可能 
( 」 


gD 
rgba( 赤 , 緑 , 青 , 不透明 度 ) 0.0 一 1.0 ま で の 不透明 


hsI( 色 相 彩 度 , 輝度 ) 色相 (0 一 360)、 彩 度 (%)、 輝度 (%) を 指定 


hela( 色 相 末 度 , 光度, 不肖 明度 ) | SO 


透明 。「transparent」 の 文字 を その まま 指定 
詳し く は 、 次 の URL を 確認 し て くだ さい 。 

e CSS3 COIOr 
http://WWwW.W3.0rg/TR/cssd-color/ 








テー ビビ へ NE に に 4 ミ ee 


887 


LIE6 』Chrome 1 Safari 5 1 Firefox 4 1 Opera11 | iO5S4 」 Android 2 1 WP 」 


SE 1 1 し JNN・ 9 た 5 


文字 の サイ ズ を 変更 する 





ここ で は 、 スタ イル シー ト で 文字 の サイ ズ を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttle>SqmpLe</t1t1e> 
<SCP1Dt Src="]S/samplte.]S"></scrtpt> 
</head> 
<body> 
<h1> 文 字 の サイ ズ を 変更 </h1> 
<form><tnput type="button" value="CSS を 変更 " 1d="change"></form> 
<div> 還 本 較 Somple Text 較 較 間 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("toad" 。 functton(){ 
// ボタ ン に イベ ント を 設定 
document .getELementById("change") .qddEventListener("cttck", functton(){ 
var dtvEtement = document.getElementsByTagName( "div")[9]: // div 要 素 を 読み 出し 
divEtement.style.fontStze = "24pt": // 文字 サイ ズ を 設定 
}, false): 
+, faqtlse): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 文字 の サイ ズ が 変更 され ます 。 





文字 


の サイ ズ を 変更 


更 


画 硬 較 TDIC |CX{ 画 画 画 


文字 の サイ ズ を 変更 ) 


CSS を 変更 。 LCSS を 
本 本 本 armDlc cxt 重 末 


テー ベビ ヘッ | に まき 軒 に 4 ミト 





mimllk 路 又 字 の サイ ズ を 変更 する に は 「fontSize] プロ パテ ィ を 使う 


文字 の サイ ズ を 変更 する に は 、 スタ イル シー ト の 「fontSize 」 プ ロ パ ティ に サイ ズ を 示す 


値 を 設定 し ます 。 値 は 単位 付き の 文字 列 に な り ます 。 つま り 、[ "24pt'」 と する と 文字 サイ 
ズ は 24pt に 、| "1209%"」 と する と 文字 サイ ズ は 1209%% サ イズ に な り ま す 。 
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LIE6 1 Chrome 』 Safari 5 | Firefox 4 Opera11 』 iOS4 | Android2 1 WP 


TIE IN コア 


文字 の 書体 を 変更 する 


ここ で は 、 スタ イル シー ト で 文字 の 書体 (フォ ント ) を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttle>SampLe</t1tle> 
<SCrtpt src="]S/Sample .]S "></SCr1Dt> 
</head> 
<body> 
<h1> 文 字 の 書体 (フォ ント ) を 変更 </h1> 
<form> 
<tnput type="button" vatue="CSS を 変更 " 1d="change"> 
</form> 
<dtv>Saqmpte Text</d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


window .addEventLtstener( "1ogd" 。 functton()1 
// ボタ ン に イベ ント を 設定 
document.getELementById( "change") .addEventLtstener("clLtck", functton(){ 
// div 要 素 を 読み 出し 
var dtvElement = document.getElementsByTagName("dtv")[9]: 
// 書体 (フォ ント ) を 設定 
divEtLement.style.fontFamtty = "Helvettcqg': 
+, fatse): 
+, false): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 文字 の 書体 が 変更 され ます 。 





を - P TIDIG を ッ し っ drTP 
2 od 6 和 * 


更 


テー ご へ > に に まき 扶 に 4 


| 文字 の 書体 (フォ ント ) を 変更 文字 の 書体 (フォ ント ) を 変 


Sample lext 
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テー ビビ へ > に に IE に 4 ミ は 
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還 司 ビ ピロ 丁 | 口 NN - ヨ ワ 6 m 文字 の 書体 を 変更 する 


“ 文字 の 書体 を 変更 する に は 
語 肖 請 語 虹 スタ イル シー ト の 「fontFamily」 ブ プロ パテ ィ を 使う 


文字 の 書体 を 変更 する に は 、 スタ イル シー ト の 「fontFamily」 プ ロ パ ティ に フォ ント 名 を 
指定 し ます 。 フォ ント 名 は 、「 Times」 や 「Helyetica」 の 文字 列 を 指定 し ます 。 書体 に よっ 
て は 文字 の 太 さ を 示す 「bold」 が 付い て いる 場合 が あり ます 。 た と えば 、「Times-bold | 
の よう な フォ ント 名 に な っ て いま す 。 文字 の 太 さ や 形状 を 示す フォ ント 名 を 指定 し た 場合 、 
Mac 版 の Safari と Google Chrome で は 反映 され ます が 、 他 の OS や プラ ウザ で は 反映 さき 
れ ま せん 。 文字 の 太 き を 指定 する 場合 に は 、「fontWeight」 プロ パテ ィ に 設定 し ます 。 


mm 融和 2 上 較 |)G 5 ら で の フォ ント 


iOS 5 で は 、 次 の フォ ント が デフ ォ ル ト で 入っ て いま す 。 
s Academy Engraved LET 
















es AppleGothic 






we Bodoni / ら 

ws Bodoni Ornaments 

w Chalkduster 

w COUrier 

w Didot 

we GeeZa Pro 

W Gujarati Sangam MN 
w Heiti TC 












W KailaSa 

w Marion 

w Uptima 

w PaDyTUS 

ws Snell Roundhand 
WThonDuri 

w Verdana 

















w Arial Hounded MT Bold 


w Hiragino Kaku Gothic ProN 


詳細 に つい て は 、 次 の URL を 参照 し て くだ さい 。 
http://Support.apple.Com/kD/HT4980?viewlocale=ja_JPSlocale=ja_ JP 


W American TyDewriter 
W Arial 

e Bangla Sangam MN 
sw Bodoni 7 ら Oldstyle 

w Bradley Hand 

w COohin 

W COUriGr NeW 

w EuDhemia UCAS 

W GeOrgia 

W Gurmukhi MN 

ws Helvetica 

w Hiragino Mincho ProN 
s Kannada Sangam MN 
ws Marker Felt 

w Oriya Sangam MN 

w Party LET 

w Tamil Sangam MN 
wTimes New Roman 
wapDf DingDats 





e Apple Color Emoji 

w Arial HeDrew 

w Baskerville 

w Bodoni 72 Smallcaps 

w ChalkDoard SE 

w CODDerplate 

\ Devanagari Sangam MN 
e Futura 

W Gil Sans 

w Heiti SC 

w Helvetica Neue 

w Hoefler Text 

w Malayalam Sangam MN 
w Noteworthy 

w Palatino 

eSinhala Sangam MN 

sw Telugu Sangam MN 

w TreDuchet MS 

W /aDfino 






LIE6 1 Chrome 1 Safari 5 』 Firefox 4 1 Opera 11 」iOS4 ! Android2 !WP 





=1 ゴ maglmlNBcy ル / 
文字 の 太 さ を 変更 する 


ここ で は 、 スタ イル シー ト で 文字 の 太 き を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<title>SampLe</t1tle> 
<SCrtpt src="]S/sample .]S"></SCrtPt> 
</heoad> 
<body> 
<h1> 文 字 の 太 さ を 変更 </h1> 
<form> 
<input type="button" vatue="CSS を 変更 " 1d="change"> 
</form> 
<dtv>SampLe Text</d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow .addEventLtstener("1ogd"。 function(){ 
// ボタ ン に イベ ント を 設定 
document.getEtementByTd("change").gddEventLtstener("clLtck", functton()1 
// div 要 素 を 読み 出し 
var divElLement = document .getElementsByTagName("dtv")[9]: 
// 太 さ を 設定 
dtvE1ement . style .fontWetght = 9090: 
+, false): 
}, faqlse): 





プラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 文字 の 太 さ が 変更 され ます 。 


テー 三 ヘ へ > に に まき に 4 ミ | 


| 文 字 の 太 さ を 変更 | 文字 の 太 さ を 変更 
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mm 王 ビ ピロ T| 口 N - ヨ ワ ワ m 文字 の 太 さ を 変更 する 











文字 の 太 さ を 変更 する に は 
語 細 細 還 縛 議 スタ イル シー ト の 「fontWeight」 プロ バテ ィ を 使う 


文字 の 太 さ を 変更 する に は 、 スタ イル シー ト の 「fontWeight」 プロパ ティ に 値 を 指定 し 
ます 。 値 は | 100」 一 「900」 ま で の 数 値 に な り ま す 。 数 値 は 値 が 大 きく な る ほど 文字 は 太く < 
な り ま す 。 た だ し 、 書体 に よっ て は 反映 され な い 場 合 が あり ます 。 

また 、 次 の 表 に 示す 文字 列 を 使っ て 太 き を 指定 する こと も で きま す 。 


文字 列 
標準 
目 で 目 場合 と 同じ ) 











に 半 加 半生 RMOOP'N も IS 
| bold | 太く (数 値 で 700 を 指定 し た 場合 と 同じ ) 


それ ぞ れ の 文字 列 と | 100] 一 「900」 を 指定 し た 結果 は 、 次 の よう に な り ま す 。 
@⑯) IEd 


















@) (SOOgle Chrome @⑯) FirefOx 































norma リ スタ イル シー ト 
bold/ ス タイ ル シ ー ト 

bolder Tex/ ス タイ ル シ ー ト 
lighter ス タイ ル シ ー ト 


norma ソ スタ イル シー ト 
bold/ ス タイ ル シ ー ト 

bolder Text/ ス タイ ル シ ー ト 
lighter/ ス タイ ル シ ー ト 
















bold/ ス タイ ル シ ー ト 
bolder Text/ ス タイ ル シ ー ト 
lighter/ ス タイ ル シ ー ト 









100 ス タイ ル シ ー ト 



































200/ ス タイ ル シ ー ト 100/7 ス タイ ル シ ー ト 

300 ス タイ ル シ ー ト 200/ の 100/ ス タイ ル シ ー ト 

400 ス タイ ル シ ー ト の ウト 200/ ス タイ ル シ ー ト 

Ss00 ス タイ ル シ ー ト めこ 300/ ス タイ ル シ ー ト 
5 5007 ス タイ ル シ ー ト 

600/ ス タイ ル シ ー ト 600/ ス タイ ル シ ー ト 400/ ス タイ ル シ ー ト 

700/ ス タイ ル シ ー ト 700/ ス タイ ル シ ー ト 500/ ス タイ ル シ ー ト 

800/ ス タイ ル シ ー ト 800/ ス タイ ル シ ー ト 600/ ス タイ ル シ ー ト 

900/ ス タイ ル シ ー ト 900/ ス タイ ル シ ー ト 700/ ス タイ ル シ ー ト 





800/ ス タイ ル シ ー ト 
900/ ス タイ ル シ ー ト 






LIE6 1 Chrome 1 Safari 5 』 Firefox 4 1 Opera 11 1 OS4 』 Android2 』WP 


EE PEITNN・ 9 / 


文字 の スタ イル を 変更 する 








ここ で は 、 スタ イル シー ト で 文字 の スタ イル (イタ リッ ク 体 / ノ ー マ ル ) を 変更 する 方 法 に つい て 
解説 し ます 。 


= が や もい 中正 需 本 HTML の コー ド (index.htmD) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttle>SaqmpLe</tttle> 
<scrtpt src="]S/sample .]S"></SCF1Dt> 
</head> 
<body> 
<h1> 文 字 の スタ イル を 変更 </h1> 
<foOrW> 
<tnput type="button" value="CSS を 変更 " 1d="change"> 
</form> 
<dtv>SqgmpLe Text</d1V> 
</body> 
</html> 


= が いい 占 = 直 mmm 正 JavaScriDt の コー ド (sample.jS) 


wtndow .addEventLtstener("1ogd" , functton(){ 
// ボタ ン に イベ ント を 設定 
document.getEtementById("change").qddEventLtstener("cltck", functton()1 
// dv 要素 を 読み 出し 
var dtvElLement = document .getEtementsByTagName( "dtv")[9] 
// スタ イル を 設定 
divEtement.style.fontStyle = "1taqltc": 
+。 false): 
}+,。 fglse): 





ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 文字 の スタ イル が 変更 され ます 。 


テー ご へ > に まま に に 4Sa 


| 文 字 の スタ イル を 変更 





Samplc Text 
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gm 王 ビ ロ T| 口 N! - ヨ ワ 日 m 文字 の スタ イル を 変更 する 


文字 の スタ イル を 変更 する に は 
mi スタ イル シー ト の 「fontStyle」 プロ バテ ィ を 使う 
文字 の スタ イル を 変更 する に は 、 スタ イル シー ト の 「fontStyle」 プロ パテ ィ に 、 次 の 表 に 


示す 文字 列 を 設定 し ます 。 な お 、 対応 する 斜め の フォ ント が 存在 し な い 場 合 、[italic | を 
指定 し て も | oblique」 を 指定 し て も 同じ 表示 結果 に な り ま す 。 


文字 列 
八 人 

















標準 (正体) 
イタ リッ ク 体 
Loblidue | 斜体 


それ ぞ れ の 文字 列 を 指定 し た 結果 は 、 次 の よう に な り ま す 。 






normal ス タイ ル シ ー ト 
gg7ic/ ズ スタア ル シー た 
o の ggxe/ ズ タプ アル シー た 






LIE6 Chrome 』 Safari 5 | Firefox 4 ! Opera 11 | iOS4 」 Android2 1 WP 」 





SL 11 も TIN こ ココ / ウ 


文字 の 形状 を 変更 する 


ここ で は 、 スタ イル シー ト で 文字 の 形状 (スモ ー ル キャ ッ プ ス / ノ ー マ ル ) を 変更 する 方 法 に つ 
いて 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>SampLe</t1tle> 
<SCPtpt src="]S/samptle . ]S "></SCr1Dt> 
</head> 
<body> 
<h1> 文 字 の 形状 を 変更 </h1> 
<for> 
<tnput type="button" vglue="CSS を 変更 " 1d="change"> 
</for> 
<dtv>Sqmpte Text</d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow . qaddEventLtstener( "Load" 。 functton()1{ 
// ボタ ン に イベ ント を 設定 
document .getEtementById("change").gddEventLtstener("cLtck",。 functton()1 
// div 要 素 を 読み 出し 
var dtvEtement = document.getELementsByTagName( "dtv")[9]: 
// 形状 を 設定 
divEtement . style.fontVartant = "small-caps": 
}, false): 
}, faqlse): 





ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 文字 の 形状 が 変更 され ます 。 


テー ビビ へ > に に ES ミ は 


文字 の 形状 を 変更 文字 の 形状 を 変更 


し レ ゥ ツ LCSS え 恋 更 





Text 
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生 ビ ロ ピロ T| 口 N - ヨ ワ ワ m 文字 の 形状 を 変更 する 


文字 の 形状 を 変更 する に は 
請 還 請 語 前 識 スタ イル シー ト の 「fontVariant」 プロ パテ ィ を 使う 


文字 の 形状 (スモ ー ル キャ ッ プ ス / ノ ー マ ル ) を 変更 する に は 、 スタ イル シー ト の 「font 
Variant」 プロ パテ ィ に 、 次 の 表 に 示す 文字 列 を 設定 し ます 。 


小文字 を 英 大 文字 に し 、 小さ い サ イズ で 表示 する 


それ ぞ れ の 文字 列 を 指定 し た 結果 は 、 次 の よう に な り ま す 。 


| JavaScript + CSS Sample 
JAVASCRIPT CSS SAMPLE 





関連 項目 ょ ゅ 


9 た FE ZI ん に は 。 PPP の 半 仙 0 p.208 
の し の っ る ミチ 7 SYO p.907 





テー* へ > に まこ 4 Sa 
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LIE6 』 Chrome 1 Safari 5 』 Firefox 4 1 Opera 11 1 iOS4 ! Android2 WP 」 


ED じ DTIHN- コ コロ 


文字 の 間隔 を 変更 する 


ここ で は 、 スタ イル シー ト で 文字 の 間隔 を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttle>SqmpLe</t1tle> 
<SCPtDt src="]S/Sammpte .]S "></SCr1Dt> 
</head> 
<body> 
<ht> 文 字 の 間隔 を 変更 </h1> 
<form> 
<tnput type="button" value="CSS を 変更 " 1d="change"> 
</fOrm> 
<div>Saqmptle Text プ サン プル テキ スト </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1ogd" 。 functton(){ 
// ボタ ン に イベ ント を 設定 
document . getEtLementById( "change").qddEventListener("cLtck" functton(){ 
// div 要 素 を 読み 出し 
var dtvEtement = document.getEtementsByTagName( "dtv")[9]: 
// 間隔 を 設定 
divEtement.style.LetterSpactng = "6pt": 
+, faqtse): 
+, fatse): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 文字 の 間隔 が 変更 され ます 。 


文字 の 間隔 を 変更 文字 の 間隔 を 変更 


の ぐさ 却 】 が . 酎 





Sample Text/ サ ンプ ブル テ キ スト Sample Text グ プサン ブル テキ スト 








テー ビビ へ > に に に 4 と 
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引 目 目 日 晶 日 
テー 三立 > に 軸 ミ に 4 Sm 
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ms ヒロ T イ | 口 N - ヨ 日 口 m 文字 の 間隔 を 変更 する 


文字 の 間隔 を 変更 する に は 
liM 良 | スタ イル シー ト の 「letterSpacing] プロ パテ ィ を 使う 


文字 と 文字 の 間隔 を 変更 する に は 、 スタ イル シー ト の 「letterSpacing」 プロパ ティ に 値 
を 設定 し ます 。 設定 する 値 は 、 単 位 付 き の 文字 列 と な り ま す 。 た と えば 、[「 "12pt'」] と する と 、 
文字 と 文字 の 間隔 は 12pt に な り ま す 。 






関連 項目 ゅ 


YNS p.899 


LIE6 』 Chrome 』 Safari 5 | Firefox 4 1 Opera 11 OS4 1 Android2 !WP_ 


=1 コ maglmlNBci=s 
単語 の 間隔 を 変更 する 


ここ で は 、 スタ イル シー ト で 単語 の 間隔 を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metq charset="utf-8"> 
<tttle>Samplte</tttle> 
<SCrtpt src="]S/sample .]S"></SCr1Dt> 
</head> 
<body> 
<h1> 単 語 の 間隔 を 変更 </h1> 
<formm> 
<input type="button" value="CSS を 変更 " id="change"> 
</form> 
<div>CSS Sampte code で す 。 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.addEventLtstener("1oad"。 functton(){ 
// ボタ ン に イベ ント を 設定 
documernt . getElementById("change").addEventLtstener("cLtck"。 functton() う 1 
// div 要 素 を 読み 出し 
var dtvELement = document.getElementsByTagName( "ditv")[9]: 
// 間隔 を 設定 
divEtement.style.wordSpactng = "2 の pt": 
+, false): 
}。 faqlse): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 文字 の 間隔 が 変更 され ます 。 


単語 の 間隔 を 変更 





CSS Samplc code で す 。 








テー へ > に に 4 
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m 選 ビビ ロ イ T| ロト | - 日 1 m 単語 の 間隔 を 変更 する 


単語 の 間隔 を 変更 する に は 
NM 還 間 江 スタ イル シー ト の 「wordSpacing] プロ バテ ィ を 使う 


単語 と 単語 の 間隔 を 変更 する に は スタ イル シー ト の 「wordSpacing」 プロ パテ ィ に 値 を 


設定 し ます 。 設定 する 値 は 、 単位 付き の 文字 列 に な り ま す 。 た と えば 、「 "12pt'」 と する と 
文字 と 単語 と 単語 の 間隔 は 12pt に な り ま す 。 





内 放 紀 三 還 必 2 


@ ぁ 文字 の 問 隔 を 変更 する 上 …… 〇 の つ ぞ i だ ドド ドド ドド ーー D.897 
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ト 
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LIE6 』Chrome ! Safari 5 | Firefox 4 』 Opera11 1 iOS4 』 Android2 WP/ 


1 = 電 是 誠 半田 Nr に CT ニシン 


行間 を 変更 する 


ここ で は 、 スタ イル シー ト で 行間 を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttle>Sample</t1tle> 
<SCrtpt src="]S/sample .]S "></SCrtDt> 
</hegd> 
<body> 
<h1> 行 間 を 変更 </h1> 
<form><itnput type="button" value="CSS を 変更 " 1d="change"></form> 
<div>CSS qnd JavaScritpt<br>Sqmple code</d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .qddEventLtstener("1oad" 。 functton(){ 
// ボタ ン に イベ ント を 設定 
document.getEtementById("change").qddEventLtstener("cltck", functton()+ 
var divELement = document.getEtementsByTagName("dtv")[9]: // div 要 素 を 読み 出し 
divE1ement.style.LtneHetght = "59pt": // 行間 を 設定 
+。 fatse): 
+, faqlse): 


プラ ウザ で index.html を 表示 し 、 ボ タン を クリ ッ ク す る と 、 行間 が 変更 され ます 。 


CSS and JavaScript 





Sample code 


mml に Sh 画 行間 を 変更 する に は スタ イル シー ト の 「lineHeight」 プロ バテ ィ を 使う 


行間 を 変更 する に は 、 スタ イル シー ト の 「 lineHeight」 プロパ ティ に 値 を 設定 し ます 。 設 
定 する 値 は 、 単位 付き の 文字 列 に な り ま す 。 た と えば 、| "20pt 」 と する と 、 行 と 行 の 間隔 
は 20pt に な り ま す 。 行間 は | 180%」 な ど 、 CSS で 指定 で きる 形式 に な り ま す 。 













テー ベビ へ > に に 4 ミ ほ 
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LIE6 上 Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS4 ) Android 2 1 WP」 


=1 コ malmINBcf= に 
行 抑え を 変更 する 


ここ で は 、 スタ イル シー ト で 行 揃え を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<rmetq Charset="utf-8"> 
<tttle>SqmplLe</t1t1e> 
<SCrtPt Src="]S/saqmple .]S"></scrtpt> 
</head> 
<body> 
<h1> 行 揃え を 変更 </h1> 
<form> 
<tnput type="button" vaqlue="CSS を 変更 " id="change"> 
</form> 
<dtv>SqmpLe Text</d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("1oagd"。functton(){ 
// ボタ ン に イベ ント を 設定 
document.getElLementByTd("change") .addEventLitstener("click",function(){ 
// dv 要素 を 読み 出し 
var divElement = document.getEtementsByTagName( "dtv")[9]: 
// 行 揃え を 設定 
divELement.style.textALtgn = "center": 
}。 fgqlse): 
+。 foalse): 





ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 行 揃え が 変更 され ます 。 





テナー ご た に 4 ミ Fa 
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m 呈 ビ ロ T| 口 N! - コ 日 コ m 行 揃え を 変更 する 


=N ヨ ョ ョ = 中 行 揃え を 変更 する に は スタ イル シー ト の 「textAIign] プロ バテ ィ を 使う 


行 揃え を 変更 する に は 、 スタ イル シー ト の 「textAligm] プロパ ティ に 行 揃 え を が す 文 字 
列 を 指定 し ます 。 指定 で きる 文字 列 は 、 次 の 表 の よう に な り ま す 。 


文字 列 
前 え ( セ ン ング ) 


央 揃え ん (セン タリ ング 
均等 割り 付け 


それ ぞ れ の 文字 列 を 指定 し た 結果 は 、 次 の よう に な り ま す 。 


左 揃え 
中 


- 行 揃え /nght 


AA 人 AM 








テー へ > EE に EE に 4 ミロ 
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LIE6 』Chrome Safari 5 | Firefox 4 1 Opera11 I iOS4 | Android2 IWP 


1 ヨコ milmINBcf= と 
文字 を 装飾 する 


ここ で は 、 スタ イル シー ト で 文字 を 装飾 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meto charset="utf-8"> 
<tttle>SqmpLe</t1t1e> 
<Scrtpt src="]s/sqmple.]S "></script> 
</head> 
<body> 
<h1> 文 字 を 装飾 する </h1> 
<formm> 
<tnput type="button" value="CSS を 変更 " id="change"> 
</form> 
<dtv>Sqmple Text</dtv> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("1ogd" , functton(){ 
// ボタ ン に イベ ント を 設定 
document .getEltementByTd("change") .gddEventListenerC "click"。 functton(){ 
// div 要 素 を 読み 出し 
var dtvElement = document.getEtementsByTagName("ditv")[9] : 
// 文字 に 取り 消し 線 を 設定 
divElement.style.textDecoration = "1ine-through": 
}, false): 
+, false): 





ロ 
5 s 
> 
= 
で 
円 
= l 


プラ ウザ で index.html を 表示 し 、 ボ タン を クリ ッ ク す る と 、 文字 に 取り 消し 線 が 表示 され ます 。 


テー へ YAJ 


| 文 字 を 装飾 する 


が 1 いで や っ あわ 可 再 
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生 ビビ ピロ TI ロ NN - コ ヨイ m 文字 を 装飾 する 


文字 を 装飾 する に は 
mi スタ イル シー ト の 「textDecoration] プロ パテ ィ を 使う 


文字 を 装飾 する に は スタ イル シー ト の 「 textDecoration」 プ ロ パ ティ に 装飾 する た め の 
文字 列 を 指定 し ます 。 指定 で きる 文字 列 は 、 次 の 表 の よう に な り ま す 。 


下線 (アン ダー ライ ン ) 


それ ぞ れ の 文字 列 を 指定 し た 結果 は 、 次 の よう に な り ま す 。 
























レト ! 


テー ぴー へ > に に きこ に 4 ミト 
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LIE6 』Chrome Safari 5 』 Firefox 4 1 Opera 11 | iOS4 」 Android2 1 WP 」 


=1 ゴ mglmlN 折 に = に 
子 下 げ ( イ ン デ ント ) を 変更 する 


ここ で は 、 スタ イル シー ト で 字 下 げ ( イ ン デ ント ) を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<mieta charset="utf-8"> 
<tttle>SampLe</t1tle> 
<SCrtpt Src="]S/sample .]S "></scrtpt> 

</head> 

<body> 
<ht> 字 下げ (イン デン ト ) を 指定 </h1> 
<form><tnput type="button" value="CSS を 変更 " id="change"></form> 
<dtv>Sqomple Text</d1v> 

</body> 

</html> 


JavaScript の コー ド (sample.js) 


wtndow.aqddEventLtstener("1ogd"。functton(){ 
// ボタ ン に イベ ント を 設定 
document.getEtementById("change").qddEventLtstener("cttck"。functton(){ 
var dtvElement = document.getEtementsByTqgName("dtv")[9]: // div 要 素 を 読み 出し 
divEtement.style.textTndent = "199pt": // 字 下 げ ( イ ン デ ント ) を 設定 
}, foqlse): 
+, false): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 最初 の 行 の 字 下 げ ( イ ン デ ント ) が 
変更 され ます 。 





字 下げ (イン デン ト ) を 変更 する に は 
ml 有 ll スタ イル シー ト の 「textIndent」 プロ パテ ィ を 使う 
字 下 げ ( イ ン デ ント ) を 変更 する に は 、 スタ イル シー ト の 「textIndent 」 プ ロ パ ティ に 装飾 す 


る た め の 値 を 指定 し ます 。 指 定 する 値 は 、 単 位 付 き の 文字 列 に な り ま す 。 た と えば 、[「"50pt 」 
と する と 、 最初 の 行頭 が 事 記 方 向 に 50pt ず れ た 位置 か ら 表 示さ れる よう に な り ま す 。 






LIE6 | Chrome 1 Safari 5 | Firefox 4 1 Opera11 1 iOS4 」 Android 2 !WP_ 


=1 コ iglmlNBcf=!= 
英文 字 の 表示 形式 を 指定 する 


ここ で は 、 スタ イル シー ト で 英文 字 の 表示 形式 を 指定 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<heqad> 
<meta charset="utf-8"> 
<tttle>Sample</t1tle> 
<SCrtDt src="]S/saqmple.]S"></SCrtDt> 
</head> 
<body> 
<h1> 英 文字 の 表示 方 法 を 指定 </h1> 
<forW> 
<tnput type="button" value="CSS を 変更 " 1d="change"> 
</form> 
<dtv>SampLe Text</d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.j8) 


wtndow .qddEventLtstener("1oqd" 。 functton(){ 
// ボタ ン に イベ ント を 設定 
documernt .getEtementById("change").addEventLtstener("cltck", functton(){ 
// div 要素 を 読み 出し 
var divEtement = document.getEtementsByTagName("dtv") う [9] : 
// 大 文字 に 設定 
ditvE1ement . style.textTransformm = "uDDPercase": 
+, fatse): 
},fqlse): 





ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 英文 字 が 大 文字 に 変更 され ます 。 






を - 


英文 字 の 表示 方 法 を 指定 


を - 4 っ dfTIDie 
ィ re by 


| 英 文字 の 表示 方 法 を 指定 


テナー ぴー へ > に まき に 4 ミ a 
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テナー ビビ ヘ へ に に に 4 ミ は 
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mW 王 ビ ピロ T| 口 ト NN! - ヨ 日 6 mW 英文 字 の 表示 形式 を 指定 する 







英文 字 の 表示 形式 を 指定 する に は 
スタ イル シー ト の 「textTransform」 プロ パテ ィ を 使う 





ロ HHNEPHINT 


英文 字 の 表示 形式 を 指定 する に は 、 スタ イル シー ト の 「textTransform | プロ パテ ィ 
に 、 次 の 表 に 示す 文字 列 を 設定 し ます 。 


通常 の 文字 に する 

英文 字 の 先頭 文字 を 大 文字 に する 
英文 字 を 大 文字 に する 
英文 字 を 小文字 に する 


それ ぞ れ の 文字 列 を 指定 し た 結果 は 、 次 の よう に な り ま す 。 





















CSS sample/none 
| CSS Samplc/Capitaize 
CSS SAMPLE/UPPERCASE 








CsS sarnple/lowercase 





関連 項目 ょ ゅ 


生 近 の 人 た 立 /MW 学 に 全開 生生 rm40 人 rcneCC23088CKSe8N82P SBC p.208 
ゅ 立 字 の 失 状 を 変 本 すい の ツ fo の Lakatt み へ EC0StPKCMDYC232 全 30 SE D.895 


LIE 10 』 Chrome 』 Safari 5 Firefox 4 1 Opera11 』iOS4 1 Android2 


JE に 1 32MIN こ は / 


文字 に 影 を 表示 する 


ここ で は 、 スタ イル シー ト で 文字 に 影 を 表示 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<meta charset="utf-8"> 
<tttte>SampLe</t1tle> 
<SCrtpt src="]s/sample .]S "></SCr1Dt> 
</head> 
<body> 
<h1> 文 字 の 影 を 設定 </h1> 
<form><tnput type="button" vglue="CSS を 変更 " 1d="change"></form> 
<div style="font-stze:24pt:"> 圏 Sample 圏 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow .aqddEventLtstener("1oqd" 。 functton( ){ 
// ボタ ン に イベ ント を 設定 
document .getEtementByIdC"change") .gddEventLitstener("cLtck"。 functton(){ 
var dtvELement = document.getEtementsByTagName("div")[9]: // diy 要 素 を 読み 出し 
divE1ement.style .textShadow = "19px 8px 5px blLue": // 文字 の 影 を 設定 
+, faqlse): 
}, faqlse): 


プラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 文字 に 青い 影 が 表示 され ます 。 


ト 


[] 
で 
p 
記 
ゴ 
内 
4 





文字 の 影 を 設定 文字 の 影 を 設定 


一 Sample 還 更 ele 囚 


文字 に 影 を 表示 する に は 
mi スタ イル シー ト の 「textShadow」 プロ パテ ィ を 使う 


文字 に 影 を 表示 する に は 、 スタイル シー ト の 「textShadow」 プロ パテ ィ に か ie 
す 値 を 設定 し ます 。 複数 の 値 を まとめ て 指定 し ます 。 その 際 、| 影 の 横 の ずれ 具 
「 影 の 縦 の ずれ 具合 ]「 影 の ぼかし 幅 」「 色 」 の 順番 で 時 と の 位置 や 色 な ど を 指定 し . 
「 textShadow」 プ ロ パ ティ に 文字 列 と し て 一 括 で 設定 し ます 。 





テー ご さめ > 
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LIE6 』Chrome Safari 5 | Firefox 4 1 Opera 11 | iOS4 1 Android2 1 WP 」 


=1 ゴ FilmINBcf=1= 
有 要素 の 育 景色 を 変更 する 


ここ で は 、 スタ イル シー ト で 要素 の 背景 色 を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metg charset="utf-8"> 
<tttle>SqmpLe</tttte> 
<SCrtpt src="]S/sample .]S"></scrtpt> 
</heqd> 
<body> 
<h1> 要 素 の 背景 色 を 変更 </h1> 
<formm> 
<tnput type="button" vglue="CSS を 変更 " 1d="change"> 
</form> 
<div> 較 本 還 Somple 田 還 呈 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.aqddEventLtstener("1ogd" 。 functton(){ 
// ボタ ン に イベ ント を 設定 
document . getEtLementById( "change").qddEventLtstener("clLtck"。 functton(){ 
// dv 要素 を 読み 出し 
var dtvElement = document.getElementsByTagName( "dtv")[9]: 
// 背景 色 を 設定 
divELement.style .backgroundColor = "yettow": 
+。 fgqlse): 
+。fqlse): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 要素 の 背景 色 が 変更 され ます 。 





テナー どど へ > EE に ま EK 


要素 の 背景 色 を 変更 の 間 最 色 を 変 昌 


mm mm 
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還 ビビ ピロ T| 口 ト | - コ 日 日 m 要素 の 背景 色 を 変更 する 


= に =lIN 引 要素 の 背景 色 を 変更 する に は スタ イル シー ト の 「color」 プロ バ パティ を 使う 


要素 の 背景 色 を 変更 する に は 、 スタ イル シー ト の 「color」 プロパ ティ に 色 を 示す カラ ー 
名 や カラ ー コ ー ド を 指定 し ます 。 カラ ー 名 は |「red」 や |blue」 な どの 文字 列 を 指定 で きま 
す 。 また 、 RGB で の 指定 や HSL 指 定 も 可能 で す 。 指定 可能 な カラ ー 形 式 は 、 次 の 表 の 
よう に な り ま す 。 


カラ ー 名 [red」 や 「green] な ど 、 あら か じ め 定 義 さ れ て い 
る 文字 列 


16 進 数 6 桁 で RGB の 輝度 を 指定 (00 一 ff) 
16 進 数 3 桁 で RGB の 輝度 を 指定 (0 
rgb( 赤 , 緑 , 青 ) 0 一 255 ま で の 輝度 を 指定 。 % で の 指定 も 可能 




















rgba( 赤 , 緑 , 青 , 不透明 度 ) 本 0.0~1.0 ま で の 不透明 
hsIl( 色 相 , 彩 度 , 輝度 ) 色相 (0 一 360)、 彩 度 (%)、 輝度 (%) を 指定 


hsla( 色 相 彩 度 , 訂 度 , 不肖 明度 ) | oman 定 らい 、 衣 放 の 6 


透明 。「transparent」 の 文字 を その まま 指定 
詳し く は 、 次 の URL を 確認 し て くだ さい 。 

e CSS93 ColOr 
http://Www.W3.0rg/TR/css3-color/ 


関連 項目 [ 
E 要素 の 背景 画像 を 変更 する 党員 ああ 才 演 で の 人 D.9 りき と 、 





テナー バ ど へ > に に 4 ミ 
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LIE6 』Chrome 1 Safari 5 | Firefox 4 1 Opera 11 | iOS4 | Android2 WP_ 


=1 ゴ mlmlNEcf= ト に 
腔 素 の 育 景 画 像 を 変更 する 


ここ で は 、 スタ イル シー ト で 妥 素 の 背景 画像 を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 


<meto charset="utf-8"> 


<tttte>SqmplLe</ttt1e> 
<SCrtDt src="]S/sqmple.]S"></scrtpt> 
</hegd> 
<body> 
<ht> 要 素 の 背景 画像 を 設定 </h1> 
<form> 
<input type="button" vatue="CSS を 変更 " 1d="change"> 
</form> 
<div> 還 古園 Somple 田 圧 較 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1oad" 。 functton(){ 
// ボタ ン に イベ ント を 設定 
document.getELementById("change").qddEventLtstener("cttck"。 functton(){ 
// dv 要素 を 読み 出し 
Var dtvElement = document.getEtementsByTaqgName("dtv")[9] : 
// 背景 画像 を 設定 
divEtement. style .backgroundImage = "urtCtmages/bg. jpg)": 
}, fglse): 
}, faqlse): 





ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 要素 の 背景 画像 が 変更 され ます 。 


テー ビー | に まま に 4 ミト 


要素 の 背景 画像 を 設定 | | 要素 の 背景 画像 を 設定 





い GS を で で G を 近 
ここ 


mmm Samplc mmm 
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gm ビ ロイ T| 口 ト ! - ヨ ロロ m 要素 の 背景 画像 を 変更 する 


要素 の 背景 画像 を 変更 する に は 
串良 スタ イル シー ト の 「backgroundlmage」 プロ パテ ィ を 使う 


要素 の 育 景 画像 を 変更 する に は 、 スタ イル シー ト の 「 backgroundImage」 プロ パテ ィ 


に 背景 画像 が ある URL を 指定 し ます 。 URL の 指定 は 、| url( 画 像 の ある URL) 」 と し て 
文字 列 で 指定 し ます 。 その 際 、 画像 の 基準 パス は HTML フ ァイル が ある ディ レク トリ (フォ 
ル ダ ) に な り ま す 。 





関連 項目 ょ ゅ 


の: 導 の 前 村人 鐘 症 潮 林 導入 ENraetoettottd12b YS8R42SSZNMCRDGreY2045 SCSNPIORRRGG024 p.910 
e 要素 の 背景 画像 の 位置 を 変更 する の ①O①v 人 it(( ド ドド ドド ドーバー ニー p.914 
e 要素 の 背景 画像 の 繰り 返し 方 法 を 変更 する … 〇 太 放 こ や 定 oooooooooooee… p.916 
e 背景 画像 の 固定 方 法 を 変更 する ………… CONECOHYRCHURUNOSH p.918 





テー ご へ > に 人 E に 4 ミト ma 
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テー ベビ へ > に たま こ 4 ミト 


914 


LIE6 』Chrome 1 Safari 5 | Firefox 4 | Opera 11 | iO54 1 Android 2 1 WP 





SE も 1 11JN- う ラロ 


妥 素 の 育 景 画 像 の 位置 を 変更 する 





こ で は 、 スタ イル シー ト で 要素 の 背景 画像 の 位置 を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metg charset="utf-8"> 
<tttte>SampLe</t1t1e> 
<SCrtDt Src="]S/sample.]S "></sCrtDpt> 
</head> 
<body> 
<ht> 要 素 の 背景 画像 の 位置 を 設定 </h1> 
<form> 
<tnput type="button" vaqtue="CSS を 変更 " 1d="change"> 
</form> 
<div style="background-tmage:urt(tmages/bg. pg)"> 圏 圏 圏 <br>Sampte<br> 圏 圏 較 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.qddEventLtstener("1oqd" functton(){ 
// ボタ ン に イベ ント を 設定 
document .getELementById("change").aqddEventLtstener("ctLtck"。 functtonC(){ 
// div 有 要素 を 読み 出し 
var dtvElement = document.getElementsByTagName( "dtv")[9] : 
// 背景 画像 の 位置 を 設定 
divElLement.style .backgroundPosition = "39px bottom'" : 
}。fqlse): 
+, faqtse): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 要素 の 背景 画像 の 位置 が 変更 さ 
人 ま すら 





呈 ビビ TI ロロ N - コ 9 口 m 要素 の 背景 画像 の 位置 を 変更 する 


0 夫 の 背景 画像 の 位置 を 変更 する に は 
スタ イル シー ト の 「backgroundPosition] プロ バ パティ を 使う 


要素 の 背景 画像 の 位置 を 変更 する に は 、 スタ イル シー ト の | backgroundPosition」 プ 
ロ パ ティ に 横 方 向 と 縦 方 向 の 位置 を 指定 し ます 。 位置 は 、 文字 列 で まとめ て XX 座標 と Y 
座標 を 指定 し ます 。 た と えば 、「 "10px 5mm 」 と する と 、 背景 画像 の 基準 表示 位置 が 横 
に 10px、 縦 方 向 に 5mm 移 動 し ます 。 また 、 次 の 表 に 示す 文字 列 で 位置 を 指定 する こと 
も で きま す 。 


文字 列 


背景 画像 の 左側 
背景 画像 の 中 央 (縦横 共通 ) 
bottom 








テー ビッ | に きこ に 4 ミト Fe 
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LIE6 』Chrome Safari 5 | Firefox 4 1 Opera 11 | iOS4 ! Android2 1 WP 」 


1 = 直 還 個 関 画 に に ま ー 周 


妥 素 の 背景 画像 の 繰り 返し 方 法 を 変更 する 


ここ で は 、 スタ イル シー ト で 有 要素 の 背景 画像 の 繰り 返し 方 法 を 変更 する 方 法 に つい て 解説 
し まお 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meto charset="utf-8"> 
<tttle>SqmpLe</t1tte> 
<SCFrtDt Src="]S/sample.]S"></SCrtpt> 
</head> 
<body> 
<h1> 要 素 の 背景 画像 の 繰り 返し 方 法 を 設定 </h1> 
<form> 
<input type="button" vgtue="CSS を 変更 " 1d="change"> 
</form> 
<dtv style="background-1mage:urt(images/bg . pg)"> 
一 <br> 還 <br> 較 <br>Sompte<br>CSS<br>JavaScrtpt<br> 較 <br> 較 <br> 較 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .gddEventLtstener("1ogd"。 functton(){ 
// ボタ ン に イベ ント を 設定 
document . getELementById("change").addEventLtstener("cLtck"。functton(){ 
// dv 要素 を 読み 出し 
var dtvElement = document.getElLementsByTagName("dtv")[9] : 
// 背景 画像 の 繰り 返し 方 法 を 設定 
dtvElement.style.backgroundRepeat = "repeat-y": 
},。 foqlse): 
+, foatlse): 





テナー どど へ > EE に に 28 
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生 ビ ロ 丁 | 口 N - コ 9 ] m 要素 の 背景 画像 の 繰り 返し 方 法 を 変更 する 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 要素 の 背景 画像 が 縦 方 向 だ け に 
繰り 返さ れ ま す 。 


要素 の 背景 画像 の 繰り 返し 方 法 を 変更 する に は 
スタ イル シー ト の 「backgroundRepeat| プロ パテ ィ を 使う 


ロロ NEPHINT 


要素 の 背景 画像 の 繰り 返し 方 法 を 変更 する に は 、 スタ イル シー ト の | background 
Repeat」 プ ロ パ ティ に 、 次 の 表 に 示す 文字 列 を 指定 し ます 。 


横 方 向 と 縦 方 向 に 繰り 返し 表示 する (デフ ォ ル ト ) 


関連 項目 


e 要素 の 背景 画像 を 変更 する 上 io p.912 
e 要素 の 背景 画像 の 位置 を 変更 する MA で 1 RM りーDTSReh 情 WW もり 時 OWN D 914 
e 背景 画像 の 固定 方 法 を 変更 する 上 0eerooeoereeeeeerrerrnrnrnrrrrrriiiiirt 0.918 








テー ご へ N> | に に IE に 45 
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LIE6 Chrome ! Safari 5 | Firefox 4 ! Opera11 | iOS4 }」 Android2 」 





=1 ゴ milmINEck に レレ 
衣 景 画像 の 固定 万 法 を 変更 する 


ここ で は 、 スタ イル シー ト で 背景 画像 の 固定 方 法 を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 





<head> 
<metg charset="utf-8"> 
<tttle>SqgmpLe</t1tt1e> 
<SCrtDt Src="]S/sqmple. ]S "></sCrtpt> 
</head> 
<body style="background-1mage :urlL(tmages/bg. pg)jhetght:89pt"> 
<ht> 要 素 の 背景 画像 の 固定 方 法 を 設定 </h1> 
<formm> 
<input type="button" value="CSS を 変更 " id="change"> 
</form> 
<d1V> 
一 <br> 較 <br> 較 <br>Soqmpte<br>CSS<br>JavaScrtpt<br> 較 <br> 較 <br> 較 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. aqddEventLtstener("1oad" 。 functton()f 
// ボタ ン に イベ ント を 設定 
documernt .getElLementById("change") .addEventLtstener("clitck", functton(){ 
// div 要 素 を 読み 出し 
var divElement = document.body: 
// 背景 画像 の 固定 方 法 を 設定 
dtvEtement. style .backgroundAttgchment = "fixed": 
+,。 fgqlse): 
+, faqlse): 





ブラ ウザ で index.html を 表示 し ます 。 背景 が 固定 され て いな い 状 態 で は 、 本 文 に 合わ せ 
て 背景 画像 も スク ロー ル し ます 。 


テー ベビ へ > に に まき こ に 4 ミ ピ 
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ロビ ロロ TI ロ NN - ヨ 92 W 背景 画像 の 固定 方 法 を 変更 する 


要素 の 背景 画像 の 固定 方 法 を 変更 する に は スタ イル シー ト の 


2 「backgroundAttachment」| プロ パテ ィ を 使う 





要素 の 背景 画像 の 固定 方 法 を 変更 する に は 、 スタ イル シー ト の |background エト 

Attachment] プ ロ パ ティ に 、 次 の 表 に 示す 文字 列 を 指定 し ます 。 文字 列 は 、「"ixed 
の よう に 、 文字 列 で 指定 する 必要 が あり ます 。 0 
スズ 

タ 

本 文 に あわ せ て 背景 も スク ロー ル す る (デフォルト ) ル 
背景 画像 を 固定 する 。 本 文 の み ス クロ ー ル する | 

ト 


な お 、 Windows Phone で は [fixed」 に 設定 し て も 育 景 は 固定 され ず 、 常に スク ロー 
ル す る 状態 に な り ま す 。 





関連 項目 ょ ょ Il 


e 要素 の 背景 画像 を 変更 する …… の il つの oeerriririririrmrmrmrmtrtm p.912 
e 要素 の 背景 画像 の 位置 を 変更 する …0 Io p.914 
e 要素 の 背景 画像 の 繰り 返し 方 法 を 変更 する ………i ド ドド oooeeeereereenrnenrmr p.916 
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LIE6 』 Chrome Safari 5 』 Firefox 4 | Opera 11 | iOS 4 1 Android2 1WP_ 


ED ILN- コ 9 


妥 素 の 位置 を 変更 する 








ここ で は 、 スタ イル シー ト で 要素 の 位置 を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="utf-8"> 


<tttte>SqmpLe</ttt1le> 
<SCPtDpt src="]s/sqmple.]S"></scrtpt> 
</hegd> 
<body> 
<h1> 要 素 の 位置 を 変更 </h1> 
<form> 
<tnput type="button" vaqlue="CSS を 変更 " id="change"> 
</formm> 
<dtv> 較 Sqmple 圏 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.gddEventLtstener("toad"。 functton(){ 
// ボタ ン に イベ ント を 設定 
document .getELementById( "change").gddEventListener("ctick"。functton(){ 
// dv 要素 を 読み 出し 
var dtvELement = document.getEtementsByTagName( "dtv")[9]: 
// 座標 系 を 設定 
dtvEtement.style.posttton = "relattve"・ 
// X 座 標 を 設定 
divEtement.style.Left = "89pt": 
// Y 座 標 を 設定 
dtvELement.style.top = "3 の pt": 
}, false): 
}, faqlse): 





テナー ご > に ES4 ミ ma 
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mm 王 ロ T| ロ ト N - ヨ 9 m 要素 の 位置 を 変更 する 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 要素 の 位置 が 変更 され ます 。 


要素 の 位置 を 変更 


る 


で SS 移 記 事 


要素 の 位置 を 変更 する に は 
請 押 縛 請 細 肛 スタ イル シー ト の 「position] プロ バテ ィ を 使う 


要素 の 位置 を 変更 する に は 、 スタ イル シー ト の 「position]」 プロ パテ ィ に 、 座標 系 を 示 
す 文 字 列 を 設定 し ます 。 すでに CSS で 設定 され て いる 場合 は 、 既存 の 座標 系 が 利用 さ 
れ ま す 。 座標 系 を 示す 文字 列 は 、 次 の 表 の よう に な り ま す 。 


絶対 座標 系 
相対 座標 系 
旨 定 な し (デフォルト) 
絶対 座標 系 (左上 に 固定 ) 
要素 の X 座 標 は 、 スタ イル シー ト の | left」 プロ パテ ィ に 単位 付き で 設定 し ます 。 Y 座 標 
る 同様 に 、「top」 プ ロ パ ティ に 設定 し ます 。 な お 、 座標 の 原点 は 常に 左上 に な り 、 右 下 に 
いく に 従っ て 座標 値 が 大 きく な り ま す 。 


文字 列 
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酸素 の 款 曰 を 変更 する 


ここ で は 、 ス タイ ル シ ー ト で 要素 の 余白 (マー ジン / パ ディ ング ) を 変更 する 方 法 に つい て 解説 
し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metqg charset="utf-8"> 
<tttle>SampLe</tttte> 
<ScrtPpt Src="]s/sqmple.]S"></scrtpt> 
</head> 
<body> 
<ht> 要 素 の 余白 を 変更 </h1> 
<form> 
<tnput type="button" vglue="margin を 変更 " 1d="change1"> 
<tnput type="button" value="padding を 変更 " 1d="change2"> 
</form> 
<dtv style="border:1px soltd black"> 圏 Sample 較 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventLtstener("1ogd", function()} 
// ボタ ン に イベ ント を 設定 
documert .getELementBy1d("change1").qddEventLtstener("click", functton(){ 
// div 要 素 を 読み 出し 
Var dtvElLement = document.getElementsByTagName( "dtv")[9] : 
// マー ジン (余白 ) を 設定 
dtvElement.style.margtn = "20px": 
}, false): 
// ボタ ン に イベ ント を 設定 
document.getEltementByTd("change2").addEventLtstener("click", functton(){ 
// div 要 素 を 読み 出し 
Var dtvElement = document.getEltementsByTagName( "div")[9] : 
// パ デ ィ ン グ (余白 ) を 設定 
dtvElLement.style.padding = "29px": 
+, faqlse): 
}, faqtse): 
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m 王 ビ ピロ T| 口 N| - ヨ 9 4 wm 要素 の 余白 を 変更 する 


プラ ウザ で index.html を 表示 し 、「margin を 変更 」 ボ タン を クリ ッ ク す る と 、 有 要素 の マー ジン 
( 枠 の 外側 ) が 変更 され ます 。 





要素 の 放 白 を 変更 する に は 
mi スタ イル シー ト の 「margin」 プロ パテ ィ や 「padding] プロ パテ ィ を 使う 


要素 の 余白 を 変更 する に は 、 ス タイ ル シ ー ト の 「margin」 プロパ ティ 、 ま た は 、| padding」 
プロ パテ ィ に 値 を 指定 し ます 。「margin」 プロパ ティ は 、 要素 の 外側 の 余白 を 指定 し ま 
す 。 指定 で きる 値 は 、 CSS で 指定 で きる 形式 に な り ま す 。「"10pt 」 と 指定 する と 、 上 下 左 
右 の 余白 が 10pt に な り ま す 。「"10pt 20pt 30pt 40pt 」 と する と 、 上 側 に 10pt、 石 側 に 
20pt、 下 側 に 30pt、 左側 に 40pt の 余 日 が 設定 され ます 。 

要素 の 内 側 の 余白 を 指定 する に は 、「padding] プ ロ パ ティ に 値 を 指定 し ます 。 指定 で 
きる 値 は 、「margin」 プ ロ パ ティ と 同様 に 、 CSS で 指定 で きる 形式 に な り ま す 。 
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妥 素 の 枠 を 変更 する 


ここ で は 、 スタ イル シー ト で 有 要素 の 枠 を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 


<rmeta charset="utf-8"> 


<tttle>Sample</t1tle> 
<ScrtDpt src="]s/sqmple.]S"></scrtpt> 
</head> 
<body> 
<ht> 要 素 の 枠 を 設定 </h1> 
<formm> 
<tnput type="button" value="CSS を 変更 " id="change"> 
</form> 
<div> 較 Soqmple 圏 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd", functton(){ 
// ボタ ン に イベ ント を 設定 
document.getELementByTd("change") .ogddEventLtstener( "clitck"。 functton(){ 
// div 要 素 を 読み 出し 
var dtvElLement = document .getEtLementsByTagName( "dtv")[9] : 
// 枠 の スタ イル な ど を 設定 
dtvEtement.style.border = "5px dotted red": 
}, faqlse): 
}, fgqlse): 





プラ ウザ で index.html を 表示 し 、 ボ タン を クリ ッ ク す る と 、 要素 の 枠 が 変更 きれ ます 。 


テー ベビ へ > に に まこ に 4 ミト ma 


要素 の 枠 を 設定 | _ 1 要素 の 枠 を 設定 


「 で で で を 所 、 
に 


* 硬 へ Sample 厚 
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加 司 ビ ヒロ TI ロ NN - ヨ 95 wm 要素 の 枠 を 変更 する 


=mNI 記 sm 画 要素 の 枠 を 変更 する に は スタ イル シー ト の 「border」 プロ バテ ィ を 使う 


要素 の 枠 を 変更 する に は 、 スタ イル シー ト の 「 border」 プ ロ パ ティ に 枠 に 関す る 値 を 設 
定 し ます 。「border」 プ ロ パ ティ に は 、 一 括 し て 枠 の 値 を 指定 する こと が で きま す 。 た と え 
ば 、[「"2px solid black'」 と する と 、 2px の 黒い 枠 が 設定 され ます 。 

また 、 次 の 表 に 示す プロ パテ ィ に 値 を 設定 する こと で 、 枠 の 形状 な ど を 変更 する こと 
が で きま す 。 


一 括 で 指 
borderLeft 枠 の 左側 の スタ イル を 一 括 で 指定 する 
枠 の 右側 の スタ イル を 一 括 で 指定 する 
ai ヽ 日 

































日 
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要素 の 表示 形式 を 変更 する 


ここ で は 、 スタ イル シー ト で 要素 の 表示 形式 を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<t1ttle>Sqmp Le</t1t1e> 
<SCr1PDt Src="]S/sqmpte.]S"></scrtDpt> 
</heqd> 
<body> 
<h1> 要 素 の 表示 形式 を 設定 </h1> 
<form> 
<tnput type="button" vgtue="CSS を 変更 " id="change"> 
</form> 
<dtv> 較 Sqmpte1 較 </div> 
<div> 圏 Sagmpte2 還 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("togd" 。 function()f 
// ボタ ン に イベ ント を 設定 
document.getELementById( "change").qddEventLitstener("clLtck"。 function(){ 
// div 要素 を 読み 出し 
Var divELement = document.getEtementsByTaqgName( "dtv")[9] : 
// 要素 の 表示 形式 を 設定 
divElement.style.display = "none": 
}, fgqlse): 
+, false): 





プラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 要素 の 表示 形式 が 変更 され ます 。 
ここ で は 、 最初 の | div」 要 素 が 表示 され な く な り 、 下 の [「 div」 要 素 が 上 に ずれ ます 。 


テナー ご へ > EE4 Sa 


| 要素 の 表示 形式 を 設定 
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gm 古 | ロト N! - ヨ 6 m 要素 の 表示 形式 を 変更 する 


要素 の 表示 形式 を 変更 する に は 
スタ イル シー ト の 「display」 プロ バテ ィ を 使う 


要素 の 表示 形式 を 変更 する に は 、 スタ イル シー ト の 「display」 プ ロ パ ティ に 次 の 表 に 
示す 値 (文字 列 ) を 設定 し ます 。 


は 使用 不 8 


NHEII に 上 


| inline == ニ = 。 | イン ライ ン 要 素 と し て 表示 する 。 


ブロ ッ ク 要 素 、 ま た は 、 イ ン ラ イン 要素 と し て 表示 する (「dt」 要素 ) 。 
CSS2.1 で は 使用 不可 

ブロ ッ ク 要 素 ま た は イン ライ ン 要 素 と し て 表示 する 

テー ブル 要素 と し て 表示 する 

テー ブル 要素 と し て 表示 する (イン ライ ン 要 素 ) 

ー ブ ル の キャ プシ ョ ン と し て 表示 する 

ー ブ ル の 行 と し て 表示 する 

ー ブ ル の セル と し て 表示 する 

ー ブ ル の 列 と し て 表示 する 

ー ブ ル の 列 グ ルー プ と し て 表示 する 

テー ブル の 行 グ ルー プ と し て 表示 する 





関連 項目 ょ ゅ 
e 要素 の 表示 方 法 を 変更 する … oo p.934 
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=1 ヨ malmINEc に ル 
受 素 の 横幅 ・ 縦 幅 を 変更 する 


ここ で は 、 スタ イル シー ト で 要素 の 横幅 ・ 縦 幅 を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttle>Sqmple</tttte> 
<SCr1Dt src="]S/sample.]S "></scrtpt> 
</head> 
<body> 
<ht> 要 素 の 横幅 縦 幅 を 設定 </h1> 
<form> 
<tnput type="button" value="CSS を 変更 " id="change"> 
</form> 
<dtv style="border:1pt soltd red"> 較 Somple 較 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1ogd" functton(){ 
// ボタ ン に イベ ント を 設定 
document.getElementByTd("change") .qddEventLtstener("cltck"。 functton(){ 
// div 要 素 を 読み 出し 
var dtvElement = document.getEtementsByTagNgme( "dtv")[9] : 
// 要素 の 横幅 を 設定 
dtvELement.style.wtdth = "199pt": 
// 要素 の 縦 幅 を 設定 
divEtement.style.hetght = "59pt": 
}, folse): 
}, false): 





ブラ ウザ で index.html を 表示 し 、 ボ タン を クリ ッ ク す る と 、 要素 の 横幅 ・ 縦 幅 が 変更 され ます 。 
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還 王 ビ ピロ T| ロ NN - ヨ ロワ m 要素 の 横幅 ・ 縦 幅 を 変更 する 


で の 横 幅 を 変更 する に は スタ イル シー ト の 「width] プロ バテ ィ 、 
縦 幅 を 変更 する に は スタ イル シー ト の 「height」 プロ パティ を 使う 


要素 の 横幅 を 変更 する に は 、 スタ イル シー ト の 「 width」 プ ロ パ ティ に CSS で 指定 可能 な 
値 を 設定 し ます 。 た と えば 、| "215pt 」 と する と 、 横 幅 が 215pt に 設定 され ます 。「 "120mm 」 
な ら 、 120mm に 横幅 が 設定 され ます 。 

縦 幅 を 変更 する に は 、 スタ イル シー ト の 「height」 プロ パテ ィ に CSS で 指定 可能 な 値 を 
設定 し ます 。「"4cm '」 と する と 、 縦 幅 は 4cm に 設定 され ます 。 


mml 表 BIIN 較 IPhOn6/Android で 表示 領域 の サイ ズ を 指定 する 


iPhone/Android で 画面 の 表示 サイ ズ を 指定 する に は 、| meta」 要素 を 使い ます 。 幅 
は 、「width」 プ ロ パ ティ と | height」 プロ パテ ィ で 指定 し ます 。 


<meta name="vtewport" content="wtdth=329,hetght=480"> 


な お 、| width」 プロ パテ ィ に | device-width」、「 height」 プロパ ティ に | device-height」 
を 指定 する と 、 デバ イス の 横幅 ・ 縦 幅 に な り ま す 。 
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有 要素 の は み 出し た 部 分 の 表示 方法 を 変更 する 


ここ で は 、 スタ イル シー ト で 有 要素 の は み 出 し た 部 分 (オー バー フロ ー し た 部 分 ) の 表示 方 法 を 
変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<mWeta charset="utf-8"> 
<tttte>SampLe</t1t1le> 
<SCr1Dt src="]Ss/sqmple .]S "></SsCP1Dt> 
</head> 
<body> 
<h1> 要 素 の は みだし 部 分 の 表示 方 法 </h1> 
<fOrrW> 
<tnput type="button" vatue="CSS を 変更 " 1d="change"> 
</form> 
<dtv style="wtdth : 199pt:hetght :69pt: "> 
ボッ クス 内 に ある テキ スト が は み 出 し た 場合 の 表示 方 法 を CSS で 指定 する こと が で きま す 。 
</d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("load" functton(){ 
// ボタ ン に イベ ント を 設定 
documert . getELementById( "change").addEventLtstener("cLtck"。 functton(){ 
// div 要 素 を 読み 出し 
var dtvElement = document.getElLementsByTagName( "dtv") う [9] : 
// 要素 の は み 出 し た 部 分 の 表示 方 法 を 設定 
ditvEtement.style.overftow = "scroll": 
+。 foqtlse): 
}。 false): 
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還 ビビ ロ T| 品 NN - ヨ 9 日 m 要素 の は み 出 し た 部 分 の 表示 方 法 を 変更 する 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 要素 の は み 出 し た 部 分 の 表示 方 
法 が 変更 され スク ロー ル バ ー が 表示 され ます 。 


要素 の は みだし 部 分 の 表 | 要素 の は みだし 部 分 の 表 
示方 法 示方 法 


ボッ クス 内 に ある テ ボッ クス 内 に ある 、* 
キス ト が は み 出 し た テキ スト が は み 
場合 の 表示 方 法 を 出し た 場合 の 表 | 
CSS で 指定 する こと た CE で 
が で きま す 。 


要素 の は み 出 し た 部 分 の 表示 方 法 を 変更 する に は 
スタ イル シー ト の 「overflow」 プロ パテ ィ を 使う 


要素 の は み 出 し た 部 分 の 表示 方 法 を 変更 する に は 、 スタ イル シー ト の | overfow」 プ 
ロ パ ティ に 、 次 の 表 に 示す 文字 列 を 指定 し ます 。 領域 の 横幅 は | width] プ ロ パ ティ 、 縦 
幅 は 「height] プ ロ パ ティ で 指定 され た 値 に な り ま す 。 

また 、 横 方 向 だ け を 別途 指定 し た い 場合 は 「overHowX」 プ ロ パ ティ 、 縦 方 向 だ け を 
指定 し た い 場 合 は 「overHowY」 プ ロ パ ティ に 、 次 の 表 に 示す 文字 列 を 指定 し ます 。 


領域 外 も 表示 する 
領域 外 は 表示 し な い 


領域 か ら は み 出し た 場合 は スク ロー ル バ ー を 表示 する 


関連 項目 ゅ 


信 要素 か がら は み 出 し た 文字 の 表示 方 法 を 変更 する し AS 2 OM ae で あみ k た do でも か で お な で を AM 波 2. 2 D.93g 


II コ NcImII に IE 
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要素 か ら は み 出 し た 文字 の 表示 方 法 を 
交 更 する 


ここ で は 、 スタ イル シー ト で 要素 か ら は み 出 し た 文字 (オー バー フロ ー し た 文字 ) の 表示 方 法 
を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq Charset="utf-8"> 
<tttle>Samplte</ttt1e> 
<SCr1Dt Src="]S/sample.]S"></scrtpt> 
</head> 
<body> 
<h1> 要 素 の は みだし 部 分 の 文字 の 表示 方 法 </h1> 
<form> 
<tnput type="button" vatue="CSS を 変更 " id="change"> 
</form> 
<dtv style="width: 159pt:hetght : 69pt:overftow:htdden"> 
<nobr> は み 出 し た 場合 の 文字 の 表示 方 法 は ? </nobr> 
</d1V> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventListener("1oad"。 functton(){ 
// ボタ ン に イベ ント を 設定 
document . getELementByTd("change").qddEventListener("cttck"。functton(){ 
// div 要 素 を 読み 出し 
Var' dtvEtement = document.getEtementsByTagName( "dtv")[9]: 
// 要素 内 の 文字 の 末尾 の 表示 方 法 を 設定 
divEtement.style.textOverflow = "elltpsts"・ 
}, faqlse): 
}, fgqlse): 
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mm 王 ビ ピロ T| ロト N! - ヨ コ 99 m 要素 か ら は み 出 し た 文字 の 表示 方 法 を 変更 する 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 要素 の は み 出 し た 部 分 の 文字 の 
表示 方 法 が 変更 され ます 。 


| 要素 の は みだし 部 分 の 文 | | 要素 の は みだし 部 分 の 文 
字 の 表示 方 法 Pk 


は み 出 し た 場合 の 文字 の 表地 FPP 場合 の 文字 の 


要素 の は みだし た 部 分 の 文字 の 表示 方 法 を 変更 する に は 
スタ イル シー ト の 「textOverflow」 プロ パテ ィ を 使う 


要素 の は みだし た 部 分 の 文字 の 表示 方 法 を 変更 する に は 、 スタ イル シー ト の 「text 
OverfHow」 プ ロ パ ティ に 、 次 の 表 に 示す 文字 列 を 指定 し ます 。 領域 の 横幅 は | width」 
プロ パテ ィ 、 縦 幅 は |height」 プロ パテ ィ で 指定 され た 値 に な り ま す 。 また 、| textOver 
人 ow」 プ ロ パ ティ に 設定 し た 値 は 、 スタ イル シー ト で 「overfHlow:hidden」 が 設定 され て い 
な いと 反映 され ませ ん 。 


領域 外 は 表示 し な い 
領域 内 の 最後 の 文字 を 「…| に する 


ロロ NEPHINT 





関連 項目 ょ ゅ 
e 要素 の は み 出 し た 部 分 の 表示 方 法 を 変更 する ……《 全 l(( ジ iii p.930 








テー ビビ に に だま に 4 ミト 


933 


LIE6 』Chrome 」 Safari 5 | Firefox 4 』 Opera11 ! iOS4 」 Android2 1 WP 」 


っ EDU TIHUHN- 人 4 ロロ 


腔 素 の 表示 方法 を 変更 する 


ここ で は 、 スタ イル シー ト で 要素 の 表示 方 法 を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta Charset="utf-8"> 
<title>Sqmpte</tttte> 
<SCr1Dt Src="]S/sqmpte .]S "></scrtpt> 
</head> 
<body> 
<ht> 要 素 の 表示 / 非 表示 を 設定 </h1> 
<forr> 
<tnput type="button" value="CSS を 変更 " 1d="change"> 
</form> 
<div> 較 Somple1 較 </div> 
<dtv> 較 Sogmple2 較 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


wtndow.qddEventListener("1ogd"。 functton(){ 
// ボタ ン に イベ ント を 設定 
document.getELementByTd("change").addEventListener(C"ctLtck", function(){ 
// div 要 素 を 読み 出し 
Var divElement = document.getEtementsByTagName( "dtv")[9] : 
// 要素 の 表示 方 法 を 設定 
divElement.style.vtsibttity = "htdden": 
+,。 foqlse): 
}, faqtse): 
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加 選 ビビ ロ T| 口 凡 - ス ロロ mw 要素 の 表示 方 法 を 変更 する 


ブラ ウザ で index.html を 表示 し 、 ボ タン を クリ ッ ク す る と 、 要素 が 表示 され な く な り ま す 。 な お 、 
「display」 プ ロ パ ティ に 「none」 を 設定 し た と き と は 異な り 、 他 の 要素 が ずれ る よう な こと は あり 
ませ ん 。 


ー ー 9 
ます 
- M 1 
Ju 


| 要素 の 表示 プ 非 表示 を 設 


要素 の 表示 方 法 を 変更 する に は 
MMl スタ イル シー ト の 「visibility」 プロ パテ ィ を 使う 


要 妻 の 表示 方 法 を 変更 する に は 、 スタ イル シー ト の 「visibility」 プ ロ パ ティ に 、 次 の 表 
に 示す 値 (文字 列 ) を 設定 し ます 。 な お 、「display」 プ ロ パ ティ と は 異な り 、 非 表 示 に する 





[」 

こと で 要素 の 位置 が ずれ た りす る こと は あり ませ ん (レイ アウ ト は 変化 し な い ) 。 > 
1 
い 

ス 

タ 

ル 

に アメ 

関連 項目 | 

ト 
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LIE6 』 Chrome 1 Safari 5 | Firefox 4 1 Opera 11 】 iOS4 I Android2 1WP_ 


BE じじ DTIUHN- 人 4 口 ]1 


要素 の Z 座 標 を 変更 する 


ここ で は 、 スタ イル シー ト で 要素 の Z 座 標 を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<hegd> 
<metg charset="utf-8"> 
<tttle>SamplLe</t1t1e> 
<Style> 
#block1,#tock2 { 
post1tton:qbsolute: 
border:1px solid black: width:299px :hetght : 49px : 
} 
#Dlock1 { left: 19px: top:139px: z-index: 19: background-color : yellow: } 
# が block2 { left: 29px: top:159px: z-itndex: 11: background-coltor: cyan: } 
</style> 
<SCrtDpt Src="]s/sqmple .]S"></scrtpt> 
</head> 
<body> 
<h1> 要 素 の Z 座 標 を 設定 </h1> 
<form> 
<tnput type="button" value="CSS を 変更 " id="change"> 
</form> 
<dtv 1d="block1"> 圏 Somple1 較 </div> 
<dtv 1d="block2"> 圏 Somple2 較 </div> 
</body> 
</html> 





は も 
私 さ JavaScript の コー ド (sample.js) 
に wtndow.aqddEventLtstener("1ogd" , functton(){ 
// ボタ ン に イベ ント を 設定 
"4 document .getELementById("change").qddEventLtstener("ctick", functton( ){ 
ッ // div 要 素 を 読み 出し 
ル Var dtvElement = document.getEtementsByTagName( "dtv")[9] : 
1 // 要素 の Z 座 標 を 設定 
ト dtvElement.style.zIndex = 15: 
}, faqtse): 
+, fatse): 
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gm ビビ ロ T| 口 N!-4 ロ 1] m 要素 の Z 座 標 を 変更 する 


ブラ ウザ で index.html を 表示 し 、 ボ タン を クリ ッ ク す る と 、 要 素 の Z 座 標 が 変更 され 、 奥 に あっ 
た 要素 が 手前 に 表示 され ます 。 











要素 の Z 座 標 を 設定 


か で で 却 : 抽 * 測 


要素 の Z 座 標 を 変更 する に は 
ml スタ イル シー ト の 「zIndex」 プロ パテ ィ を 使う 


要素 の Z 座 標 を 変更 する に は 、 スタ イル シー ト の 「zIndex 」 プ ロ パ ティ に 、 単位 な し の 
数 値 を 指定 し ます 。| zIndex 」 プ ロ パ ティ の 値 が 大 きい ほど 、 手前 に 表示 され ます 。 負 
数 の 値 も 指定 で きま す が 、 プラ ウザ に よっ て は 期待 通り 動作 し な い 場 合 が あり ます (次 の 
図 を 参照 )。 

また 、 親 要 素 の 座標 を 継承 する 場合 に は 、「inherit」 の 文字 を 指定 し ます 。 な お 、 デ 
フォ ルト で は 、|auto」 が 設定 され て いま す 。 








Z 座標 が 大 きい ほど 手前 に 表示 され る 
負数 も 指定 で きる 


zIndex = -9 [ 


ボコ ーー ニニ ニニ ニニ ニニ ニニ ニー ニー ゴ ニー ニー ニー ニー ニー ニー ニー デュ 
ドニ ーー ペー ニー ニニ ニニ ニニ ニニ ニー ニー ニニ デー ニー ニー ニャ 
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LIE6 』 Chrome 」 Safari 5 」 Firefox 4 1 Opera 11 1 iOS 4 | Android2 WP」 


EE ロビ TI ロロ N- オ ロジ 


腔 素 の 表示 倍率 を 変更 する 


ここ で は 、 スタ イル シー ト で 妥 素 の 表示 倍率 を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tt せ te>SqmpLe</ttt1e> 


<SCPtDt Src="]S/Ssqmpte .]S "></scrtDt> 


</head> 

<body> 
<h1> 要 素 の 表示 倍率 を 設定 </h1> 
<form> 


<input type="button" vglue="CSS を 変更 " 1d="change"> 
</form> 
<dtv> 較 Sample1 圏 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oagd" 。 functton(){ 
// ボタ ン に イベ ント を 設定 
document.getELementById("change") .qddEventLtstener("cttck"。functton(){ 
// div 要 素 を 読み 出し 
var dtvElement = document.getElementsByTagName( "dtv")[9]: 
// 要素 の 表示 倍率 を 設定 
divElement.style.zoom = 2.5: 
}, false): 
}, faqlse): 





ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 要素 の 表示 倍率 が 2.5 倍 に 変更 さ 
れ ま す 。 


テナー へ > EE に 4 ミ me 


素 の 表示 倍率 を 設定 


| で SS 記 軍 


要素 の 表示 倍率 を 設定 





還 Sample]l 還 


Samplel 回 
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gm ビビ ロ 丁 | 口 N- ス ロジ m 要素 の 表示 倍率 を 変更 する 


要素 の 表示 倍率 を 変更 する に は 
= り ヨ MM スタ イル シー ト の 「zoom」 プロ バテ ィ を 使う 


要素 の 表示 倍率 を 変更 する に は 、 スタ イル シー ト の 「 zoom」 プ ロ パ ティ に 倍率 を 示す 
数 値 を 設定 し ます 。 値 は 「1.0」 を 指定 する と 100%% サ イズ 、「0.5] な ら 50%% サ イズ で 表示 さ 
れ ま す 。「2.0] で あれ ば 、 200% サ イズ で 表示 され ます 。 
また 、「normal」 の 文字 列 を 指定 する と 100% サ イズ に な り ま す 。 


miml 商 日 上 較 スマ ー ト フォン で の 表示 倍率 


iPhone/Android で は 、 次 の よう に 、「meta」 要 素 に [initiaLscale」 を 指定 する こと で 、 
最初 の 表示 倍率 を 設定 で きま す 。 な お 、Windows Phone で は 、 設 定 は 反映 され ませ ん 。 













<meta name="vtewport" content="1ntttal-scale=1.9"> 


また 、 ユー ザー に よる 拡大 縮小 操作 (スケ ー リ ング 操作 ) を 禁止 する に は 、 次 の よう に 
指定 し ます 。 


<metq name="vtewport" content="user-scalable=no"> 


ユー ザー に よる 拡大 ・ 縮 小 操作 で 最小 の 倍率 を 指定 する に は 、 次 の よう に |minimum- 
scale」 を 使い ます 。 









<meta name="vtewport" content="mtntmum-SCale=1.9"> 


ユー ザー に よる 拡大 ・ 縮 小 操 作 で 最大 の 倍率 を 指定 する に は 、 次 の よう に minimum- 
scale を 使い ます 。 


<meta name="vtewport" content="maxtmum-SCale=Z2.9"> 
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LIE9 Chrome 1 Safari 5 Firefox 4 | Opera11 1 iOS4 』 Android2 1 WP 


っ EDU TIHN- オ ロコ 


要素 の 角 丸 を 変更 する 


ここ で は 、 スタ イル シー ト で 要素 の 角 丸 を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<hegd> 
<metg charset="utf-8"> 
<title>Sample</tttle> 
<Style> 
div 1 border:2px soltd black: wtdth:229px: hetght: 89px: } 
</style> 
<SCPtDt src="]s/sqmple.]S "></scrtpt> 
</head> 
<body> 
<ht> 要 素 の 角 丸 を 設定 </h1> 
<formW> 
<tnput type="button" vatue="CSS を 変更 " 1d="change"> 
</for> 
<div> 較 Somple1 較 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.gddEventListener("1ogd" , functton(){ 
// ボタ ン に イベ ント を 設定 
documert.getElementByTd("change") .addEventLtstener("cttck"。function(){ 
// div 要 素 を 読み 出し 
var dtvElement = document.getElLementsByTagName("div")[9] : 
// 要素 の 角 丸 を 設定 
dtvEtLement.style.borderRadius = "29px": 
}, fatse): 
+, faqtse): 





テー ご へ YE に ESFe 
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和 mm 王 ピ TI 品 N-4 ロ コ m 要素 の 角 丸 を 変更 する 


プラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 要素 の 角 が 丸く な り ます 。 


要素 の 角 丸 を 設定 


かぐ ぐ 頑 泊 ? 曽 
















要素 の 角 丸 を 変更 する に は 
mim スタ イル シー ト の 「borderRadius」 プロ パテ ィ を 使う 


要素 の 角 丸 を 変更 する に は 、 スタ イル シー ト の 「borderRadius] プロ パテ ィ に 角 丸 半 
径 を 示す 単位 付き の 数 値 を 設定 し ます 。 設定 で きる 値 は 、 スタ イル シー ト で 設定 で きる も 
の と 同じ に な り ま す 。[「"20px'"」 と する と 、 すべ て の 角 丸 半径 が 20px に な り ま す 。| 20px 
10px'」 と する と 、 左上 と 右 下 が 20px に 、 右上 と 左下 が 10px の 角 丸 半 筐 に な り ま す 。 

また 、 角 丸 を 個別 に 指定 する 場合 は 、 次 の 表 に 示す プロ パテ ィ に 単位 付き 数 値 を 指 
定 し ます 。 


セレ 【 














borderBottomRightRadius 
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LIE9 』Chrome 1 Safari 5 | Firefox 4 Opera 11 ! iOS4 ! Android2 1 WP」 


=1 コ mMlmINE と Ia と | 
妥 素 に 影 を 表示 する 


ここ で は 、 スタ イル ンー ト で 要素 に 影 を 表示 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<Style> 
div { border:1px soltd black: wtdth:229px: hetght: 89px: } 
</style> 
<SCPtDpt src="]s/sample.]S"></scrtpt> 
</head> 
<body> 
<h1> 要 素 の 影 を 設定 </h1> 
<form> 
<tnput type="button" value="CSS を 変更 " id="change"> 
</form> 
<div> 較 Somple1 較 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("togd" 。 functton(){ 
// ボタ ン に イベ ント を 設定 
document.getElLementByTd("chagnge").gddEventLtstener("clitck"。 functton(){ 
// div 要 素 を 読み 出し 
Var dtvElement = document.getEtementsByTagName( "div")[9] : 
// 要素 の 影 を 設定 
divEtement.style.boxShadow = "49px 29px 19px 15px blue": 
}, false): 
}, faqlse): 





テー ベビ へ QN > たま に 4 ミト 
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生 王 ロ 丁 | 口 N- ス ロス 4 m 要素 に 影 を 表示 する 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 要素 に 青い 影 が 表示 され ます 。 








要素 に 影 を 表示 する に は 
mM 唐 スタ イル シー ト の 「boxShadow」 プロ パテ ィ を 使う 


要素 に 影 を 表示 する に は 、 スタ イル シー ト の 「boxShadow]」 プ ロ パ ティ に 影 を 示す 値 を 
設定 し ます 。 複数 の 値 を まとめ て 指定 し ます 。 その 際 、「 影 の 横 の ずれ 具合 」| 彰 の 縦 の 
ずれ 具合 | 「 影 の ぼかし 幅 」「 影 の 広がり 幅 」「 色 」 の 順番 で 影 の 位置 や 色 な ど を 指定 し 、 
[boxShadow」 プ ロ パ ティ に 文字 列 と し て 一 括 で 設定 し ます 。 







4 
タ 
宮 
ル 
1 
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LIE9 』Chrome 上 Safari 5 | Firefox 4 1 Opera11 1 iOS4 I Android2 1 WP 」 


EDU TIHN- 人 オロ 5 


不 箕 明 度 を 指定 する 


ここ で は 、 スタ イル シー ト で 文字 や 画像 な どの 要素 の 不透明 度 を 指定 する 方 法 に つい て 解 
説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttle>Sqmple</t1t1e> 
<Style> 
body { background-tmage: url(tmages/bg.]jpg) } 
div }# border:3px soltd black: 
background-color:whtte: wtdth:229px: hetght: 89px: } 
</'style> 
<SCrtpt Src="]S/sqmple.]S"></scrtpt> 
</hegd> 
<body> 
<h1> 不 透明 度 を 設定 </h1> 
<form> 
<tnput type="button" vatue="CSS を 変更 " id="change"> 
</for> 
<div> 較 Samptle1 較 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventListener("toad", functton(){ 
// ボタ ン に イベ ント を 設定 
document .getELementByTId("change").gddEventLitstener("cttck",。functton(){ 
// div 要 素 を 読み 出し 
Var divElement = document.getElementsByTagName( "dtv")[9] : 
// 要素 の 不透明 度 を 設定 
ditvEtement.style.opactty = 9.5: 
}, faqlse): 
}, false): 





テー ご ビ へ > に まこ に 4 ミド 
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mW 戸 ビビ ピ T| 口 NN - オ スロ 5 m 不透明 度 を 指定 する 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 ボッ クス 部 分 の 不透明 度 が 50% に 
な り ま す 。 


mm 上 下 不 透明 度 を 指定 する に は スタ イル シー ト の 「opacity」 プロ バテ ィ を 使う 


文字 や 画像 な どの 不透明 度 を 指定 する に は 、 スタ イル シー ト の 「opacity」 プ ロ パ ティ に 、 
「00」-「1.0] ま で の 数 値 を 指定 し ます 。 数 値 は 大 きい ほど 、 不 透明 に な り ま す 。 つま り 、| 0」 
な ら 完 全 な 透明 に な っ て 要素 は 見 えな く な り 、| 1.0」 な ら 完 全 に 見 える 状態 に な り ま す 。 

また 、| opacity」 プ ロ パ ティ を 操作 せ ず に 不 箕 明 度 を 指定 する は 、| color」 プ ロ パ ティ 
や | backgroundColor」 プロパ ティ に 、 rgba 形 式 か hsla 形 式 で 指定 し ます (887 ペ ー ジ 
参照 ) 





り 
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=1 ゴ mmlmINE と Wal= 
リサ イズ 処理 を 指定 する 


ここ で は 、 スタ イル シー ト で リサ イズ 処理 を 指定 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttle>Sqmple</tttle> 
<Style> 
div { border:3px soltd blgck:wtdth:229px: height: 89px: } 
</style> 
<SCrtpt src="]S/sample.]S"></scrtpt> 
</head> 
<body> 
<hi> ボ ックス の リサ イズ 処理 を 設定 </h1> 
<fori> 
<tnput type="button" vatue="CSS を 変更 " 1d="change"> 
</form> 
<div> 較 Somple 還 </div> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.addEventListener("1ogd" 。 function(){ 
// ボタ ン に イベ ント を 設定 
document . getELementById("change") .qddEventLtstener("click"。functton(){ 
// div 要 素 を 読み 出し 





エ var dtvElement = document .getElementsByTagName( "dtv")[9]: 
> // 要素 の リサ イズ 処理 を 設定 
『- 」 電 
業 * divE1ement.style.resize = "both": 
a divELement.style.overftow = "quto": 
ス }。 faqlse): 
タダ 
イ }, false): 
ル 
| 
ト 
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生 ビ ロ TI 口 N! - オ ロ 6 m リサ イズ 処理 を 指定 する 


プラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 ボッ クス 部 分 の 右 下 に リサ イズ ボタ 
ン が 追加 され リサ イズ 処理 が 可能 に な り ま す 。 


Sample 
を う GQA 


ボッ クス の リサ イズ 処理 を 設定 














ーー ペーーー ペ ーー トー ペー ンー ニー ペーーーーーーーーーーーー 一 一 ーーーー ニ ーー ーー マツ ーー ペー ペー マーーーーーーーーーーー バ ーー 


の リサ イズ 処理 を 設定 











ロロ NE ビ PO ロ INT 
要素 を り リサ イズ する に は 、 ス タイ ル シ ー ト の 「resize」 プ ロ パ ティ に 、 次 の 表 に 示す 値 ( 文 


字 列 ) を 設定 し ます 。 また 、 同時 に |「 overHow」 プ ロ パ ティ に | "auto 」 を 設定 する 必要 が 
あり ます 。 









2 
| horizontal | 
| vertical | 


テー へ > に まこ に 4 = 








説明 

「 ロ に 

horizontal 横 方 向 の み リ サイ ズ 可 能 に する 
縦 方 向 の み リ サイ ズ 可 能 に する 
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上 ヒビ ロ ピロ T エ 1 ロロ N- オ ロワ 
アニ メー ショ ン 時 間 を 変更 する 


ここ で は 、 スタ イル シー ト で アニ メー ショ ン 時 間 を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metg chgrset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<Ltnk rel="stylesheet" href="css/matn.css"> 
<SCr1Pt Src="]S/sqmple.]S"></scrtpt> 
</head> 
<body> 
<h1> 要 素 を アニ メー ショ ン </h1> 
<formW> 
<tnput type="button" vqlue="CSS を 変更 " id="change"> 
</form> 
<div 1d="box"> 圏 Sampte 圏 </div> 
</body> 
</html> 


CSS の コー ド (main.css) 


#box { 
wtdth : 399px: 
border:2px soltd red: 
background-color: yellow: 
-moz-qntmatton: boxrestze 4s linear 9s tnftntte qtlternate: 
-webk1t-gntmatton: boxrestze 4s ltnear 9s tnfintte alternate: 
gntmatton: boxrestze 4s litnear 9s infintte glternate: 
} 
@keyfrqmes boxrestze { 
の ⑳% { width: 199px: } 
199% {1 wtdth:329px: + 
} 
@-moz-keyframes boxrestze { 
の % { wtdth: 199px: } 
190% { wtdth:329px: } 
} 
@-webk1t-keyframes boxrestze + 
9% { width: 199px: + 
199% 1 width:329px: + 





テナー どど へ > EE に EK4 Sa 
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mm 戸 ビ ビ ロ TI 口 N- オ ロワ 7 m アニ メー ショ ン 時 間 を 変更 する 


JavaScript の コー ド (sample.jS) 


wtndow.qddEventListener("1Load" , functton()+ 
// ボタ ン に イベ ント を 設定 
document.getEtementById("change").qddEventLtstener("cltck", functton(){ 
// アニ メー ショ ン し て いる adiy 要 素 を 取得 
var qntmeBox = document.getELementById("box"): 
// アニ メー ショ ン の 速度 を 変更 (9.5 秒 に する ) 
aqntmeBox . style.WebkitAnimattonDuratton = "599ms': 
antmeBox . style .MozAnimattonDuratton = "599ms": 
antmeBox . style.antmattonDuratton = "599ms": 
}, false): 
}, false): 


ブラ ウザ で index.html を 表示 し 、 ボタ ン を クリ ッ ク す る と 、 要素 の アニ メー ショ ン 時 間 が 変更 
され ます 。 


民 Sample 


要素 を アニ メー ショ ン 


人 


アニ メー ショ ン 時 間 を 変更 する に は 
スタ イル シー ト の 「animationDuration] プロ パテ ィ を 使う 


要素 の アニ メー ショ ン が 行わ れる 際 の 時 間 を 変更 する に は 、 ス タイ ル シ ー ト の | animation 
Duration」 プ ロ パ ティ に 、 時 間 を 示す 文字 列 を 指定 し ます 。 た と えば 、| 2s 」 で あれ ば 、2 
秒 で アニ メー ショ ン が 行わ れ ま す 。 | "500ms 」 で あれ ば 、500 ミ リ 秒 (05 秒 ) で アニ メー ショ 
ン が 行わ れ ま す 。 

な お 、 プロ パテ ィ 名 に ベン ダー プレ フィ ックス を 付け な いと 、 動作 し な い 場 合 が あり ます 。 
Firefox で あれ ば [Moz」、 Safari や Google Chrome で あれ ば | webkit」 (| Webkit」 で 
も 動作) 、 Opera の 場合 は 「o」 (オー) を 付加 し ます 。 を プロ パテ ィ 名 の 前 に 付け ます 。 サ 
ンプ ル で は 、 それ ぞ れ 、「MozAnimationDuration」 | WebkitAnimationDuration」 と 
し て いま す 。 


ロ NEP ロ INT 





ン 


テー ぴー | に 4 ミ e 
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テナー ご へ > EEE に 4 ミ a 


950 


BEUTIHN- 人 4 口 日 


3D 変 形 を 行う 








ここ で は 、 スタ イル シー ト で 表示 され て いる 要素 に 対し 、3D 変 形 を 行う 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<hegd> 
<rmetq charset="utf-8"> 
<tttle>Sqmple</tttle> 
<Itnk rel="stylesheet" href="css/matn.cSss"> 
<SCr1Dt Src="]S/sqmpte.]S"></sCrtpt> 
</heoad> 
<body> 
<h1> 要 素 を 3D 変 形 </h1> 
<form> 
<tnput type="button" vglue="CSS を 変更 " id="change"> 
</form> 
<dtv 1d="box"> 圏 Somple 較 </div> 
</body> 
</html> 


CSS の コー ド (main.css) 


#box { 
w1dth : 320Dx: 
hetght : 249px: 
color: whtte: 
border:2px soltd red: 


background-1tmage: urtCsqmple.]pg): 





JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1ogd", functton(){ 
// ボタ ン に イベ ント を 設定 
document.getElementByTd( "change") .addEventListener("cttck"。functton(){ 
// 3D 変 形 す る div 要 素 を 取得 
var qntmeBox = document.getEtementById("box"): 
// 3D 変 形 
Var cssText = "matrtx( の 9.5, -9.8、9.2, 9.25, 59, 9) rotate(99deg)": 
antmeBox . style.transform = cssText: 
gntmeBox . style.webkttTransform = cssText: 
qntmeBox . style.MozTransform = cssText: 
}, faqlse): 
}。 fgqlse): 


生 王 ピ T| 口 ト N! - イ ロロ 日 m 3D 変 形 を 行う 


ブラ ウザ で index.html を 表示 し 、 マト リク ス に よる 変形 を 行っ た 後に 90 度 回 転 を 行っ た 結果 
が 表示 され ます 。 要素 内 の 文字 や 画像 が 同じ よう に 変形 処理 され ます 。 


展 Sample 





mmlN 画 3D 変 形 を 行う に は スタ イル シー ト の 「transform」 プロ バテ ィ を 使う 





要素 を スタ イル シー ト を 使っ て 3D 変 形 を 行う に は 、 スタ イル シー ト | transform」 プ ロ パ 
ティ に 、 次 の 表 に 示す いずれ か の パラ メー タ ( 文 字 列 ) を 設定 し ます 。 また 、 半角 空白 で 
区 切っ て 列記 する こと も で きま す 。 


matrix( 横 の 倍率 , 縦 の 傾斜 率 , 横 の 傾斜 率 . 


縦 の 倍率 , 横 の 移動 距 量 , 縦 の 移 重量) 


な お 、 プロ パテ ィ 名 に ベン ダー プレ フィ ックス を 付け な いと 、 動作 し な い 場 合 が あり ます 。 
Firefox で あれ ば 「Moz」、Safari や Google Chrome で あれ ば [| webkit」 (| Webkit」 で 
る 動作 ) を プロ パテ ィ 名 の 前 に 付け ます 。 サン プル で は 、 それ ぞ れ 、|「 MozTransform」 
「webkitTransform」 と し て いま す 。 


に ーーーー 一 










テー ぴぴ ビ へ > に まこ に 4 ミ に | 
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Android 2 


BE 上 UTIUHN- 人 オロ 9 


トラ ンジ ショ ン を 設定 する 








ここ で は 、 有 要素 に 対し て トラ ンジ ショ ン を 設定 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<metq charset="utf-8"> 
<tttle>Sqmple</ttt1e> 
<lLtnk rel="stylesheet" href="css/matn.css"> 
<SCr1Dt Src="]S/sample.]S"></scrtpt> 
</hegd> 
<body> 
<hti> ト ラン ジ シ ョ ン </h1> 
<formW> 
<tnput type="button" value="CSS を 変更 " 1d="change"> 
</form> 
<div 1d="box"> 較 Somple 圏 </div> 
</body> 
</html> 


CSS の コー ド (main.css) 


#box { 
wtdth : 329px: 
hetght : 249px: 
border:2px soltd red: 
-webktt-trgnsttton: height 3s tinear 1s: 


-moz-transttton: hetght 3s ttnear 15: 





ャ transttton: hetght 3s linear 15s: 

ち } 
3 

ゴ #box:hover { 

hetght: 49px: 

ズ } 

タ 

イ 

ル JavaScript の コー ド (sample.js) 
1 wtndow.addEventLtstener("1ogd" 。 functton(){ 


// ボタ ン に イベ ント を 設定 
document.getElLementById("change").addEventListener("clLtck"。function(){ 
// トラ ンジ ショ ン ( 切 り 替 え ) を 行う div 要 素 を 取得 
Var gntmeBox = document.getEtementById( "box"): 
// トラ ンジ ショ ン を 設定 
var cssText = "hetght の.25s 1inegr": 


antmeBox . style .transttton = cssText: 
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生 ヒロ TI ロ N- オ イロ 9 mw トラ ンジ ショ ン を 設定 する 


antmeBox . style .webkttTransttton = CSsText: 4 
antmeBox . style .MozTransttton = CSSText: 
+, faqlse): 
+, false): 


ブラ ウザ で index.html を 表示 する と 、 赤 枠 の 要素 に は トラ ンジ ショ ン が 設定 され て お り 、 マウ 
ス を 乗せ る と 1 秒 後 に トラ ンジ ショ ン が 開始 され ます 。 








ボタ ン を クリ ッ ク す る と トラ ンジ ショ ン の 速度 が 変更 され 、 マウ ス を 乗せ る と 0.25 秒 後に トラ ンジ 
ショ ン が 開始 され ます 。 





トラ ンジ ショ ン を 設定 する に は 
スタ イル シー ト の 「transition] プロ バテ ィ を 使う 


ロロ NEPUINT 


要素 に トラ ンジ ショ ン を 設定 する に は 、 スタ イル シー ト の 「transition」 プロ パテ ィ に 、 変 
更 す る プロ パテ ィ や 速度 を 一 括 し て 文字 列 で 指定 し ます 。 複数 の プロ パテ ィ を 変更 する 
場合 は 、["height 0.25s linear, width 1s linear 」 の よう に 、「,」 (カン マ ) で 区 切っ て 記 
述 し ます 。 

トラ ンジ ショ ン を 変更 する 場合 は 、 直接 、| transition] プロ パテ ィ に 設定 する より ゃ 、 
CSS で クラ ス を 定義 し て 切り 換え る 方 が 簡単 で す 。 

な お 、 プロ パテ ィ 名 は 、 ベン ダー プレ フィ ックス を 付け な いと 動作 し な い 場 合 が あり ま 
す 。 Firefox で あれ ば | Moz」、 Safari や Google Chrome で あれ ば [| webkit」(Webkit 
で る 動作 ) を プロ パテ ィ 名 の 前 に 付け ます 。 サン プル で は 、 それ ぞ れ 、「 MozTransition」 
「 webkitTransition」 と し て いま す 。 


テー ビビ へ NE に EEE に 4E 
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=1 ヨ FilmINE と lm 
妥 素 に グレ ー フ ィ ル タタ を 適用 する 


ここ で は 、 スタ イル シー ト で 要素 に グレ ー フ ィ ル タ を 適用 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttte>Sqmple</tttle> 
<ScrtPt Src="]S/sqmple .]S "></scrtpt> 
</head> 
<body> 
<h3> 要 素 に グレ ー フ ィ ル タ を 適用 </h3> 
<formW> 
値 :<tnput type="text" vglue="190%" 1d="fitterVatue" size="8"> 
<tnput type="button" value="CSS を 変更 " id="change"> 
</form> 
<tmg Src="tmages/sample.]pg' wtdth="329" hetght="249"> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.gddEventLtstener("1ogd" , functton(){ 
// ボタ ン に イベ ント を 設定 
documert.getELementByTd("change").qddEventLitstenerC"click"。 functton(){ 
// img 要素 を 読み 出し 
var tmg = document.getElementsByTagName( "1mg")[9] : 
// テキ スト フィ ー ル ド に 入力 され て いる 値 を 読み 出し 
var vaql = document.getElementById("fitlterVatue").vqlue: 
// グレ ー フ ィ ル タ を 設定 
tmg.Style.webkttFtlter = "grayscate("+va1+")": 
+, false): 
}, faqlse): 





ブラ ウザ で index.html を 表示 し 、 グ レー スケ ー ル の 割合 (「0%」-「100% |、 ま た は 、 10.0」- 
| 10」 の 数 値 ) を 入力 し て ボタ ン を クリ ッ ク す る と 、 画像 が グレ ー ス ケー ル に な り ま す 。 


テー ご へ > に きき に 4 ミト ma 
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mm 王 TI 口 届 -41 口 m 要素 に グレ ー フ ィ ル 夕 を 適用 する 


| ] Sample 


拓 人 | い 


要素 に グレ ー フ ィ ル タ を 適用 
| 舎 :toOx | 










| ] Sample 
を. M @e S RY 


要素 に グレ ー フ ィ ル タ を 適用 


| 舎 fow 


グレ ー ス ケー ル に する に は スタ イル シー ト の 「filter」 プロ バテ ィ に 
miMl 「'grayscale( 値 )"」 の 文字 列 を 指定 する 


要素 を グレ ー ス ケー ル に する に は 、 スタ イル シー ト の | 則 ter」 プ ロ パ ティ に | grayscale 
( 値 )"| の 文字 列 を 指定 し ます 。 設定 する 値 も 、 文字 列 と し て 一 括 し て 設定 する 必要 が 
あり ます 。 値 は 0% 一 100% ま で の 範囲 、 も し く は 0.0 一 1.0 の 二 囲 で 指定 し ます 。 値 が 大 きく 
な る ほど フィ ル タ 効 果 の 度合 い が 強 く な り ま す 。 


mm 章 昌 IN [filter| プロ バテ ィ の プロ バテ ィ 名 に つい て 


サン プル で は 、「webkitFilter | の よう に ベン ダー プレ フィ ックス が 付い て いま す 。 将来 、 
ベン ダー プレ フィ ックス な し で 動作 する よう に な っ た 場合 に は 、| webkitFilter」 を | 旬 ter」 
に 修正 する 必要 が あり ます 。 














e グレ ー ス ケー ル 画 像 に する ドド p.480 
e 要素 を セピア 調 に する ……… ド em p.956 
e 亜 素 に トー ン (色相 変換) フィ ル タ を 適用 する oo"』_oememeeerrrrrrrr 0p.958 
e 亜 素 に 色 反 転 フ ィ ル タ を 適用 する … oro p.960 
e 要素 の 輝度 (明る さ ) を 変更 する ………0irroroeoeooe oo 0.96 
e 要素 の コン トラ スト な を 変更 する … io 0.965 
e 可 素 の 彩 度 を 変更 する 上 io D.968 
e 要素 に ぼかし フィ ル タ を 適用 する 上 …]irr 上 er p.97 ] 





テー ご へ NN EE に IE に 4 ミ に | 
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LChrome 1 Safari 6 」 


=1 コ mMlmINE と NB 
要素 を セ ビ ア 調 に する 


ここ で は 、 スタ イル シー ト で 有 要素 を セピア 調 に する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 


<tttte>Sampte</tttle> 








<SCrtpt src="]s/sqmple.]S "></scrtpt> 
</head> 
<body> 
<h3> 要 素 に セピア フィ ル タ を 適用 </h3> 
<form> 
値 :<input type="text" value="199%" 1d="ftLterVatue" stze="8"> 
<tnput type="button" vgtue="CSS を 変更 " id="change"> 
</form> 
<tmg SrPc="tmages/sqmple.]pg' wtdth="329" hetght="249"> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventListener(C"togd", functtonC){ 
// ボタ ン に イベ ント を 設定 
document.getElementByTd("change") .addEventListener("cLtck"。functton(){ 
// img 要素 を 読み 出し 
Var tmg = document.getEtementsByTagName( "1mg")[9] : 
// テキ スト フィ ー ル ド に 入力 され て いる 値 を 読み 出し 
Var val = document.getEtementById( "fttterVatue").vqlue: 
// セピア フィ ル タ を 設定 
tmg.Style.webkttFttter = "septa("+vagl+" う ": 
+, faqtse): 
+, faqlse): 





テー ご へ > に きこ に 4 ミト ae 
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箇 王 ロ 丁 | 口 N - イ 1 1 m 要素 を セ ビ ア 調 に する 


ブラ ウザ で index.html を 表示 し 。 セ ビ ア の 適用 割合 (| 0%」 一 |「100%」、 また は 、|0.0」- 
「1 0 | の 数 値 ) を 入力 し て ボタ ン を クリ ッ ク す る と 、 画像 が セ ビ ア 調 に な り ま す 。 







| ] Sample 





要素 に セピア フィ ル タ を 適用 
」 











| 仁 hoow 





| ] Sample 
を うっ Go 識 誠 細 細 。 








要素 に セピア フィ ル タ を 適用 
2 





値 :100% 





セピア 調 に する に は スタ イル シー ト の 「filter」] プロ バテ ィ に 
mM 「"sepia( 値 )"」 の 文字 列 を 指定 する 


要素 を セピア 調 に する に は 、 スタ イル シー ト の | filter」 プ ロ パ ティ に | sepia( 値 ) 」 の 文 
字 列 を 指定 し ます 。 設定 する 値 も 、 文字 列 と し て 一 括 し て 設定 する 必要 が あり ます 。 値 
は 「0%」~ー「100%」、 も し く は 、「00」-「1.0」 の 革 囲 で 指定 し ます 。 値 が 大 きく な る ほど 、 
フィ ル タ 効 果 の 度合 い が 強 く な り ま す 。 





mm 画 四 に N 細 [filter| プロ バテ ィ の プロ パテ ィ 名 に つい て 


サン プル で は 、「webkitFilter | の よう に ベン ダー プレ フィ ックス が 付い て いま す 。 将来 、 
ベン ダー プレ フィ ックス な し で 動作 する よう に な っ た 場合 に は 、| webkitFilter」 を | 名 ter」 
に 修正 する 必要 が あり ます 。 


関連 項目 ょ ゅ i 





e 要素 に グレ ー フ ィ ル タ を 適用 する …0(iliiii io p.954 
e 要素 に トー ン ( 色 相 変 換 ) フィ ル タ を 適用 する …" iiiieeoooororrereerrrern p.958 
e 要素 に 色 反 転 フ ィ ル タ を 適用 する ……… の Te 一 D.960 
e 要素 の 輝度 (明る さ ) を 変更 する … ひ ee p.962 
e 要素 の コン トラ スト な を 変更 する 上 …… ド io D.965 
e 要素 の 彩 度 を 変更 する 上 ir p.968 
e 玩 素 に ぼかし フィ ル タ を 適用 する … で reiroooo D.97 1 





テー ご へ > に に きこ 4 se| 
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gE ビ ロビ T1 ロ NN - 人 412 ジ 


腔 系 に トー ン ( 色 相 変 換 ) フ ィ ル タ を 適用 する 


ここ で は 、 スタ イル シー ト で 有 要素 に トー ン ( 色 相 変 換 ) フ ィ ル タ を 適用 する 方 法 に つい て 解説 し 
ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<heqd> 
<metq charset="utf-8"> 
<tttte>Sqmple</tttle> 
<ScPtpt src="]S/sampte.]S"></scrtpt> 
</heqd> 
<body> 
<h3> 要 素 に トー ン フ ィ ル タタ を 適用 </h3> 
<form> 
値 :<tnput type="text" vglue="129" 1d="ftLterVatue" stze="8">deg(@ て 369) 
<tnput type="button" value="CSS を 変更 " id="change"> 
</form> 
<tmg Src="1mages/sampte.]pg" wtdth="329" hetght="249"> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow.qddEventLtstener("1oqgd" 。 functton(){ 
// ボタ ン に イベ ント を 設定 
document.getELementByTd("change") .qddEventListener("clitck"。functton(){ 
// img 要素 を 読み 出し 
Var tmg = document.getElementsByTagName( "1mg")[9] : 





エ // テキ スト フィ ー ル ド に 入力 され て いる 値 を 読み 出し 
var val = document.getElLementById("fitterVatue").vgtue: 
= // トー ン ( 色 相 変 換 ) フ ィ ル タ を 設定 
= tmg.Style .webkttFtlter = "hue-rotate("+val+"deg)": 
ダ }, false): 
イ }。 fglse): 
ル 
1 
ト 


プラ ウザ で index.html を 表示 し 、 ト ー ン (色相 変換 ) フ ィ ル タ の 割合 ([「0%」 一 「100%」、 ま た 
は 、「0.0」 一 「1.0」 の 数 値 ) を 入力 し て ボタ ン を クリ ッ ク す る と 、 画像 の トー ン が 変化 し ます 。 
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mW 王 ビ ピロ TI| 口 NN -412 W 要素 に トー ン ( 色 相 変 換 ) フ ィ ル タ を 適用 する 


| ] Sample 
nu S couasockco 誠 衣 還 


要素 (に トー ン フ ブフ ィ ル 鐘 を 適用 


| 値 : 20 ldeg0<360) 59 生 










| ] Sample 


とう で | い 





要素 に トー ン フ ィ ル タ を 適用 
| 値 :f2o ego-360) 





トー ン ( 色 相 ) を 変更 する に は スタ イル シー ト の 「 flter」 プロ バテ ィ に 
「"hue-rotate( 値 )"」 の 文字 列 を 指定 する 


要素 の トー ン ( 色 相 ) を 変更 に する に は 、 スタ イル シー ト の 「fiter」 プ ロ パ ティ に 「"hue- 
rotate( 値 )"」 の 文字 列 を 指定 し ます 。 設定 する 値 も 、 文字 列 と し て 一 括 し て 設定 する 
必要 が あり ます 。 値 は 「0%」 一 | 100%」、 もしくは 、|0.0」 一 |1.0」 の 男 囲 で 指定 し ます 。 
値 が 大 きく な る ほど 、 フィ ル タ 効 果 の 度合 い が 強 く な り ま す 。 


mml 画 連 N 上 明 [filter| プロ バテ ィ の プロ バテ ィ 名 に つい て 


サン プル で は 、| webkitFilter | の よう に ベン ダー プレ フィ ックス が 付い て いま す 。 将来 、 
ベン ダー プレ フィ ックス な し で 動作 する よう に な っ た 場合 に は 、| webkitFilter」 を | 名 ter」 
に 修正 する 必要 が あり ます 。 














1 








関連 項目 jp 


e 画像 を 特定 の 色相 (トー ン ) に する …… ポ に に oe p.499 
e 要素 に グレ ー フ ィ ル タ な を 適用 する 一 iii ドド ooioiooereeerererrnrrnrrnernrnrrnr Dp.954 
e 要素 を セピア 調 に する に D.956 
e 相 素 に 色 反 転 フ ィ ル タ を 適用 する …… 一 (moonereerernrererrrr p.960 
e 相 素 の 輝度 (明る さ ) を 変更 する (en Dp.962 
の 要素 の コン トラ スト を 変更 する サザ サド ます や すす すす すす てく や マツ て さて と す て イ トミ メア テト ささ くき て トル D.965 
e 要素 の 彩 度 を 変更 する ooo p.968 
e 可 素 に ぼかし フィ ル タ を 適用 する 一 roo D.97 1 





テー ビー ヘ へ > に に まき に 4 ミド | 
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ED TIHN- 人 41 


腔 素 に 色 反 転 フ ィ ル タ を 適用 する 


ここ で は 、 スタ イル シー ト で 要素 に 色 反 転 フ ィ ル タ を 適用 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttte>Sqmple</tttle> 
<SCrtDt src="]S/sqmple.]S"></scrtpt> 
</head> 
<body> 
<h3> 要 素 に 色 反 転 フ ィ ル タ を 適用 </h3> 
<formW> 
値 :<tnput type="text" value="199%" 1d="ftlterValue" stze="8"> 
<tnput type="button" vatue="CSS を 変更 " id="change"> 
</form> 
<1md SPC="1mmQgeSs/sample.]pg'′ wtdth="329" height="249"> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1ogd" 。 functton(){ 
// ボタ ン に イベ ント を 設定 
document .getELementById("change").addEventListener("cltck"。functton(){ 
// img 要 素 を 読み 出し 
Var tmg = document.getEtementsByTagName( "tmg") う [の] : 
// テキ スト フィ ー ル ド に 入力 され て いる 値 を 読み 出し 
var val = document.getElementById("fi1lterVatue") .vatue: 
// 色 反 転 フ ィ ル タタ を 設定 
tmg.Style.webkttFtlter = "tnvert("+va1+" う ": 
},。 fgqlse): 
+, false): 





テナー ビビ へ YE たま に 4 ミ に | 
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mm ビビ ロ TI 品 NI-41 コ m 要素 に 色 反 転 フ ィ ル タ を 適用 する 


プラ ウザ で index.html を 表示 し 、 フィ ル タ 効 果 の 割合 (0% 一 100% ま た は 0.0 一 1.0 の 数 値 ) 
を 入力 し て ボタ ン を クリ ッ ク す る と 、 画像 の 色 が 反転 し ます 。 







[ Sample 





要素 に 色 反 転 フ ィ ル タ を 適用 





色 は 反転 させ る に は スタ イル シー ト の 「fjlter」 プロ バテ ィ に 
mM「"invert( 値 )"」 の 文字 列 を 指定 する 


要素 の 色 を 反転 きせ る に は スタ イル シー ト の 「 名 ter」 プロパ ティ に | invert( 値 ) 」 の 文 
字 列 を 指定 し ます 。 設定 する 値 も 、 文字 列 と し て 一 括 し て 設定 する 必要 が あり ます 。 値 
は 「0%」ー「100%」、 も し く は 、「00」-「1.0」 の 範囲 で 指定 し ます 。 値 が 大 きく な る ほど フィ 
ル タ 効 果 の 度合 い が 強 く な り ま す 。 


mml 画 IN [filter| プロ バテ ィ の プロ パテ ィ 名 に つい て 


サン プル で は 、[webkitFilter | の よう に ベン ダー プレ フィ ックス が 付い て いま す 。 将来 、 
ベン ダー プレ フィ ックス な し で 動作 する よう に な っ た 場合 に は 、| webkitFilter」 を | 名 ter」 
に 修正 する 必要 が あり ます 。 


関連 項目 ゅ 





e 要素 に グレ ー フ ィ ル タ を 適用 する eee 0.954 
e 要素 を セピア 調 に する …… ド ーー p.956 
e 相 素 に トー ン ( 色 相 変 換 ) フィルタ を 適用 する …… (ionerererrrrrrrrr 0p.958 
e 相 素 の 光度 (明る さ ) を 変更 する ーー D.96 
e 要素 の コン トラ スト を 変更 する emem p.965 
e 要素 の 彩 度 を 変更 する 上 … の (ioooeoeemeeneeneonmnonmnmnmnrnirmirni p.968 
e 更 素 に ぼかし フィ ル タ を 適用 する 上 …iiiooeooeeeneeeerrt D.97 1 





テー ビッ に ES 
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5 上 ビビ TIUHN- 人 オ 1 人 4 


妥 素 の 輝度 (明る さ ) を 変更 する 


ここ で は 、 スタ イル シー ト で 有 要素 の 輝度 (明る さ ) を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 











<head> 
<meta charset="utf-8"> 
<t1tle>SamplLe</ttt1le> 
<SCPrtDt src="]S/sampte.]S"></sCrtpt> 
</hegd> 
<body> 
<h3> 要 素 に 輝度 調整 フィ ル タ を 適用 </h3> 
<fOrmW> 
値 :<input type="text" vgqlue="49%" 1d="ftlterVatue" stze="8"> 
<tnput type="button" value="CSS を 変更 " 1d="change"> 
</form> 
<tmg Src="tmages/sampte.]pg'" wtdth="329" hetght="249"> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow .qddEventLtstener("1ogd"。 functton(){ 
// ボタ ン に イベ ント を 設定 
documernt.getELementBy1Id( "change").qddEventLtstener("cLtck"。functton(){ 
// img 要 素 を 読み 出し 
var tmg = documernt.getElLementsByTagName("1mg")[9]: 
// テキ スト フィ ー ル ド に 入力 され て いる 値 を 読み 出し 
var val = document.getEtementByTd("ftlterVaqlue") .vatue: 
// 輝 度 調整 フィ ル タ を 設定 
1mg.Style .webkttFttter = "brightness("+val+") う ": 
+,。 faqtse): 
+。fqtse): 
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ビビ ロ T| 口 NN - オ 414 m 要素 の 輝度 (明る さ ) を 変更 する 


ブラ ウザ で index.html を 表示 し 、 輝度 の 強 さ (「-100%」ー「100%」、 ま た は 、「0.0」 一 「1.0」 
の 数 値 ) を 入力 し て ボタ ン を クリ ッ ク す る と 、 画像 の 明る さ が 変 化し ます 。 














| ] Sample X 





要素 に 交 度 調整 フィ ル タ を 適用 
値 :40% 。 | SS5 黒 









| ] Sample 
を と っ で GQ 








要素 に 郊 度 調整 フィ ル タ を 適用 


負数 の 場合 は 画像 が 暗く な り ま す 。 


| ] Sample 





要素 に 交 度 調整 フィ ル タ を 適用 








テー ニー へ いひ > RETESE2 Se 
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m ビ ロ 丁 [| 口 山 -4124 mW 要素 の 輝度 (明る さ ) を 変更 する 


本 還 較 生還 明る さ を 調 整 する に は スタ イル シー ト の 「filter] プロ バテ ィ に 
「"Drightness( 値 )"」 の 文字 列 を 指定 する 


要素 の 明る さ を 調整 する に は スタ イル シー ト の | 名 ter」 プ ロ パ ティ に [「 "brightness( 値 )"」 


の 文字 列 を 指定 し ます 。 設定 する 値 も 、 文字 列 と し て 一 括 し て 設定 する 必要 が あり ます 。 
値 は |-100%」 一 「100%」、 も し く は 、| -10」 一 「1.0] の 範囲 で 指定 し ます 。 値 が 大 きく な る ほ 
ど 明 る く な り 、 負数 に な る と 暗く な り ま す 。 


mami 両日 に 上 較 [fiter| プロ バテ ィ の プロ パテ ィ 名 に つい て 


サン プル で は 、「 webkitFilter | の よう に ベン ダー プレ フィ ックス が 付い て いま す 。 将来 、 
ベン ダー プレ フィ ックス な し で 動作 する よう に な っ た 場合 に は 、「 webkitFilter」 を [「 反 ter | 
に 修正 する 必要 が あり ます 。 









関連 項目 ょ ゅ 


画像 の ガン マ 補 正 を 行う 1 すく バイ ルル MP も NT Dp.492 
e 要素 に グレ ー フ ィ ル タ を 適用 する し YY XY ツテ トド D.954 
e 要素 を セピア 調 志 する ーー ドー ドド ドド ……… p.956 
e 要素 に トー ン ( 色 相 変 換 ) フィ ル タ を 適用 する ……(…… の (l… 〇 つ O つ CQ ニ Cro の neo ロー D.958 
e 要素 に 色 反 転 フィ ル タ を 適用 する ……… の SC に が 84 の 4 AA p.960 
1 np4 ス 。 : 9- の 凍り FI p.965 
e 要素 の 彩 度 を 変更 する …… ぽ ……… POYN1047V0M や が 3005x5700 人 yuryeknrtrn D.968 
e 要素 に ぼかし フィ ル タ を 適用 する ………………… FC CCP 間 KA な ッ p.97 1 


LChrome 1 Safari 6 」 


に 1 ゴ miglmlN と Mi に 
要素 の コン トラ スト を 変更 する 


ここ で は 、 スタ イル シー ト で 要素 の コン トラ スト を 変更 する 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meto charset="utf-8"> 


<tttte>Sample</t1tle> 








<Scrtpt src="]S/sqmple.]S "></SCPtDt> 
</head> 
<body> 
<h3> 要 素 に コン トラ スト フィ ル タ を 適用 </h3> 
<fori> 
値 :<tnput type="text" value="150%" 1d="fttterVatue" stze="8"> 
<tnput type="button" vaqlue="CSS を 変更 " 1d="change"> 
</formm> 
<tmg Src="1tmages/sample.]pg" wtdth="32 の 9" hetght="Z49"> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow .qddEventListener("1oad" , functton(){ 
// ボタ ン に イベ ント を 設定 
document .getEtementById("change").addEventLtstener("cLtck", function()+ 
// img 要 素 を 読み 出し 
var tmg = document.getELementsByTaqgName( "1mg")[9]: 
// テキ スト フィ ー ル ド に 入力 され で て いる 値 を 読み 出し 
var val = document.getEtLementByTId("ftlterValue").vaqtue: 
// コン トラ スト フィ ル タ を 設定 
img.style .webkitFitter = "contrast("+val+" う ": 
+。 foqlse): 
+。fqtse): 
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mm ビ ピロ ピロ T| 口 NN -415 wm 要素 の コン トラ スト を 変更 する 


ブラ ウザ で index.html を 表示 し 、 フィ ル タ 効 果 の 割合 を 入力 し て ボタ ン を クリ ッ ク す る と 、 値 
が 大 きい ほど 、 コン トラ スト が 強く な り ま す 。 100% よ り 大 き な 値 を 指定 する こと も で きま す 。 







| ] Sample 
AN OK 





要素 に コン トラ スト フィ ル タ を 適用 
LCSS を 2 な 更 | 






| 値 :5000% | 








を と うっ う @GIQ 


要素 に コン トラ スト フィ ル タ を 適用 
値 w | 





m 王 ロ TI 口 N-415 wm 要素 の コン トラ スト を 変更 する 


コン トラ スト を 調整 する に は スタ イル シー ト の 「filter」 プロ バテ ィ に 
「"contrast( 値 )"」 の 文字 列 を 指定 する 


要素 の コン トラ スト を 調整 する に は スタ イル シー ト の 「 加 ter] プロ パテ ィ に [| "contrast 
( 値 )"| の 文字 列 を 指定 し ます 。 設定 する 値 も 、 文字 列 と し て 一 括 し て 設定 する 必要 が 
あり ます 。 値 は 「0%」 以 上 、 も し く は 、「0」 以 上 の 数 値 で 指定 し ます 。 値 が 大 きく な る ほど 、 
コン トラ スト が 強く な り ま す 。「0%」 を 指定 する と 、 まっ た く コ ント ラス ト が な く な る た め 、 要素 
の 内 容 は 灰色 に な り ま す 。 


mm 両 和 IN [filter| プロ バテ ィ の プロ バテ ィ 名 に つい て 


サン プル で は 、[「 webkitFilter | の よう に ベン ダー プレ フィ ックス が 付い て いま す 。 将来 、 
ベン ダー プレ フィ ックス な し で 動作 する よう に な っ た 場合 に は 、「 webkitFilter」 を | ter」 
に 修正 する 必要 が あり ます 。 












ロロ NEPOHINT 


関連 項目 ゅ 





e 要素 に グレ ー フ ィ ル タ を 適用 する ……… ド mmm p.954 
e 要素 を セピア 調 に する …… ド ドド ドド ドド p.956 
e 要素 に トー ン ( 色 相 変 換 ) フ ィ ル タ を 適用 する ……… ド ooo 宮 p.958 
e 要素 に 色 反 転 フ ィ ル タ を 適用 する …… ド ドド ドド mmm p.960 
e 要素 の 輝度 (明る さ ) を 変更 する ……… ド ドド ドド oi p.962 
e 要素 の 彩 度 を 変更 する … oo p.968 
e 要素 に ぼかし フィ ル タ を 適用 する …… ド ドド ドド ドド ドド ememmemeenernmemーo p.971 
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EDU じ DTIHN- 人 416 


有 要素 の 彩 度 を 変更 する 


ここ で は 、 スタ イル シー ト で 要素 の 彩 度 を 変更 する 方 法 に つい て 解説 し ます 。 
HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 








<head> 
<metq charset="utf-8"> 
<tttte>Somp le</title> 
<SCPtDt src="]S/saqmple.]S"></scrtpt> 
</head> 
<body> 
<h3> 要 素 に 彩 度 フィ ル タ を 適用 </h3> 
<forrm> 
値 :<input type="text" vglue="159%" 1d="ftLterValue" stze="8"> 
<tnput type="button" value="CSS を 変更 " id="change"> 
</form> 
<tmg Src="1tmages/sample.]pg" width="329" heitght="249"> 
</body> 
</html> 


JavaScript の コー ド (sample.js) 


wtndow. gddEventLtstener("1oad"。 function()}# 
// ボタ ン に イベ ント を 設定 
document .getEtementByTd("change").qddEventListener("cltck"。functtonC){ 
// img 要 素 を 読み 出し 
Var tmg = document.getElementsByTagName("1mg")[9]: 
// テキ スト フィ ー ル ド に 入力 され て いる 値 を 読み 出し 





var vaql = document.getElementById("ftlterVatue").vqlue: 
// 彩 度 フィ ル タ を 設定 
tmg.Style .webk1tFtlter = "sqturate("+val+" う ": 
+, fgqtse): 
}, fatse): 
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和 mm ビビ ロ TI 口 NN - イ 16 m 要素 の 彩 度 を 変更 する 


ブラ ウザ で index.html を 表示 し 、 フィ ル タ 効 果 の 割合 を 入力 し て ボタ ン を クリ ッ ク す る と 、 値 
が 大 きい ほど 彩 度 が 強く な り ま す 。 100%% よ り 大 き な 値 を 指定 する こと も で きま す 。 











| ] Sample 


還 識 








要素 に 彩 度 フ ィ ル タ を 適用 


値 :765% _ | 





| ] Sarnple 


を う @ 


要素 に 彩 度 フィ ル タタ を 適用 


「09% | を 設定 する と 、 彩 度 が な く な る た め 、 画像 は グレ ー ス ケー ル に な り ま す 。 


| ] Sammple 
<. 由 e Sa 


要素 に 彩 度 フ ィ ル タ を 適用 








テー ぴー ヘッ | に に まき に 4 ミ に ほ 


969 





セレ! 


テー ぴー ヘッ に まま に 4 ミ Ia 





970 





mm 王 ビ ビビ TI ロロ N-416 wm 要素 の 彩 度 を 変更 する 





彩 度 を 調整 する に は スタ イル シー ト の 「filter] プロ バ パティ に 
「"saturate( 値 )"」 の 文字 列 を 指定 する 


康 の 彩 度 を 調整 する に は スタ イル シー ト の 「 操 ter」 プ ロ パ ティ に [「"Saturate( 値 )"」 
の 文字 列 を 指定 し ます 。 設定 する 値 も 、 文 字 列 と し て 一 括 し て 設定 する 必要 が あり ます 。 
値 は 10%」 以 上 、 も し く は 、「0」 以 上 の 数 値 で 指定 し ます 。 値 が 大 きく な る ほど 、 彩 度 が 強 
く な り ま す 。 | 0%」 を 指定 する と 、 ま っ た く < 彩 度 が な く な る た め 、 要素 の 内 容 は グレ ー ス ケー 
ル と 同じ に な り ま す 。 


mami 可 に 半 [fiiter| プロ バ パティ の プロ パテ ィ 名 に つい て 


サン プル で は 、| webkitFilter 」 の よう に ベン ダー プレ フィ ックス が 付い て いま す 。 将来 、 
ベン ダー プレ フィ ックス な し で 動作 する よう に な っ た 場合 に は 、「webkitFilter 」 を [filter | 
に 修正 する 必要 が あり ます 。 


mmi 沿 2 に 識 その 他 の CSS フ ィ ル タ 


本 書 に 掲載 し た CSS フ ィ ル タ 以 外 に も 、 不透明 度 を 指定 する CSS フ ィ ル タ や 影 を 指定 
する CSS フ ィ ル タ が あり ます 。 

要素 の 不 穫 明 度 を 指定 する に は 、「f 和 ter」 プロパ ティ に 「"opacity( 値 )"| の 文字 列 を 
指定 し ます 。 設定 する 値 も 、 文 字 列 と し て 一 括 し て 設定 する 必要 が あり ます 。 値 は 「0% | 
~「100%」、 も し く は 、「0.0」 一 「1.0] の 範囲 で 指定 し ます 。「0%」 (また は 「00」) が 完全 
に 大 明 で 、「100%」 (また は 「1.0」) が 完全 に 不透明 に な り ま す 。 

要素 に 影 を 指定 する に は 、「f 各 ter」 プロパ ティ に 「"drop-shadow( 横 方 向 の オフ セッ ト 
席 方 向 の オフ セッ ト ぼかし の 半径 影 の 色 )"」 の 文字 列 を 指定 し ます 。 設定 する 値 も 、 
文字 列 と し て 一 括 し て 設定 する 必要 が あり ます 。「 横 方 向 の オフ セッ ト 」 「 縦 方 向 の オフ 
セッ ト 」] | ぽか し の 半径 は ピク セル 単位 で 指定 し ます (px を 付け て 指定 する )。「 影 
色 ] に は 色 を 示す カラ ー 名 や カラ ー コ ー ド を 指定 し ます 。 指定 可能 な カラ ー 形 式 に つい て 
は 、 887 ペ ー ジ を 参照 し て くだ さい 。 

な お 、| -webkit-drop-shadow」 の よう に 、 ベン ダー プレ フィ ックス が 必要 な 場合 が あり 
まけ 
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関連 項目 ょ ゅ 
k 拓 拉 6 の es ワ ヴィル タ を 鞍 用 ず 0 に 0 に 0 いて おら 1 が 00 か p.954 
人 00021 p.956 
e 要素 に トー ン ( 色 相 変 換 ) フ ィ ル タ を 適用 する 和 ーー…ー バ ーーー……・ p.958 
NB p.960 
の し OAD に エト 2 の すき の 生生 本 ES 3Ne 員 p.962 
本 2 p.965 
し CZ き 腕 の 3 し な ーー の っ 25 の 0 や 1TY 旦 EYE が UI p.97 1 


=1 ゴ eglmlN と NM/ 
要素 に ぼかし フィ ル タ を 適用 する 


ここ で は 、 スタ イル シー トト で 要素 に ぼかし フィ ル タ を 適用 する 方 法 に つい て 解説 し ます 。 


= が Wl 表 = 需 mmlml= 半 HTML の コー ド (index.htmD) 


<!DOCTYPE html> 
<html> 








<head> 
<meta charset="utf-8"> 
<tttte>SampLe</t1tle> 
<scrtpt src="]S/sqmple .]S "></SCr1Dpt> 
</head> 
<body> 
<h3> 要 素 に ぼかし フィ ル タ を 適用 </h3> 
<forW> 
値 :<tnput type="text" value="2" 1d="ftlterVatue" stze="8">Px 
<tnput type="button" vgqlue="CSS を 変更 " 1d="change"> 
</form> 
<tmg src="tmages/sample.]pg'′ wtdth="320" hetght="Z49"> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 
wtndow .addEventLtstener("1ogd" 。 functton()+ 
// ボタ ン に イベ ント を 設定 
document .getELementById("change").gddEventLtstener("cLtck", functton()+ 
// tmg 要 素 を 読み 出し 
var tmg = document.getEtementsByTagNagme("1mg")[9]: 
// テキ スト フィ ー ル ド に 入力 され て いる 値 を 読み 出し 
var val = document.getELementById("fttterVatue").value: 
// ぽか し フィ ル タ を 設定 
1mg .style .webkttFittter = "blur("+vagl+"Px う ": 
+, false): 
+, fqlse): 


プラ ウザ で index.html を 表示 し 、 ぼかし 幅 ( 単 位 は ピクセル) を 人 入力 し て ボタ ン を クリ ッ ク す る 
と 、 値 が 大 きい ほど ぼかし 具合 が 強く な り ま す 。 
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還 選 E ビ ビビ TIN-417 mW 要素 に ぼかし フィ ル タ を 適用 する 


| ] Sample 
と っ Ge 


要素 に ぽ ぼかし フィ ル タ を 適用 






l 値 2 







Sample 
を うぅ う @o 





KO 


要素 に ぼかし フィ ル タ を 適用 










ぼかす に は スタ イル シー ト の 「filter」 プロ パテ ィ に 
「"blur( 値 )"」 の 文字 列 を 指定 する 


素 を ぼかす に は スタ イル シー ト の 「 操 ter」 プロ パテ ィ に 「"blur ( 値 ) "の 文字 列 を 指 
定 し ます 。 設定 する 値 も 、 文字 列 と し て 一 括 し て 設定 する 必要 が あり ます 。 ぼかし 幅 を ピ 
クセ ル で 指定 し ます 。 その 際 、 整数 値 だ け で な く 、「1.25px 」 と いっ た 小数 値 も 指定 する こ 
と が で きま す 。 な お 、 ぼかし 効果 は 要素 が 表示 され て いる 範囲 を 超え て 表示 され る の で 、 
他 の 要素 に も ぼかし た 影響 が 広がる こと が あり ます 。 


mm 癌 8 に 間 症 [filter| プロ バテ ィ の プロ パテ ィ 名 に つい て 


サン ブル で は 、| webkitFilter」 の よう に ベン ダー プレ フィ ックス が 付い て いま す 。 将来 、 
ベン ダー プレ フィ ックス な し で 動作 する よう に な っ た 場合 に は 、 | webkitFilter 」 を | 旬 ter | 
に 修正 する 必要 が あり ます 
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関連 項目 ょ ゅ 
(| と 2 わす 9 は 隊 に て 0RO 時 太 の D0 4S p.488 
9 丘 抹 に グレ エー フッ ル タ を な 壮 用 す 2 の 涼 に の に (NKKRIIASNIGOEO2I p.954 
2 導 に 等 RC p.956 
e 要素 に トー ン ( 色 相 変 換 ) フ ィ ル タ を 適用 する バート ミーレ ユー コー…(ー ド ーー ムー の p.958 
e 尻 素 に 色 反 転 フ ィ ル タタ を 適用 する 光る る 放 コ Keee も る か ゆけ が る 0 お Ia D.960 
@ 要素 の 尊 度 ( 朋 る) 友 変 画す る ロー スト め ド ト ンタ 2020 KA D.96 
0 業 の ゴジ ント の 本 押 本 2 夫 計 仙 004ckelee4020JUKUR07ERReB2UU 0D.965 
@ 要 宇 の 彩 度 世 変 本 まる 上 や キ …e‥… ヘ の の い 全 や 己 いい ドド ie D.968 


LIE 10 1 Chrome 1 Safari 5 | Firefox6 
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CSS の メデ ィ ア クエ リ を 調べ る 





ここ で は 、 スタ イル シー ト で 利用 され る メデ ィ ア クエ リ を 調べ る 方 法 に つい て 解説 し ます 。 


HTML の コー ド (index.html) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tttte>Sqmple</tttle> 
<titnk rel="stylesheet" type="text/css" href="css/mtn.CSS" 
medita="screen qnd (mtn-wtdth : 249px) aqnd (max-wtdth:489px)"> 
<ltnk rel="stylesheet" type="text/css" href="css/max .CSS" 
media="screen gnd (mtn-wtdth :489px) aqnd Cmax-wtdth: 899px)"> 
<scrtpt src="]S/sqmple.]S"></SCrtDt> 
</hegd> 
<body> 
<h1>Media Query を 調べ る </h1> 
<p> ウ ィ ン ド ウサ イズ を 変更 し た 後に ボタ ンク リッ ク </p> 
<form> 
<tnput type="button" vaqlue="Medig Query チ ェ ッ ク "> 
</form> 
<OU て DuU キ ></OuUtDut> 
</body> 
</html> 


JavaScript の コー ド (sample.jS) 


witndow .addEventListener("1oad"。functton(){ 
var ele = document.getEtementsByTagName("output")[9] : 





// ボタ ン に ctick イ ベン ト を 割り 当て 上 
var btn = document .getEtementsByTagName("tnput")[9] : 
btn.addEventListener("clLtck"。 functton(){ yr 
// 調べ る Medtq Query 文 字 列 を 指定 。 E19 は msMgtchMedto いり 
var flag = window.matchMedta("Cmtn-wtdth:489px) qnd (max-wtdth: 899px)" ) . matches: る 
tf (flLag === true) { タ 
ele.innerHTML = "Cmtn-wtdth:489px) qnd (max-wtdth:899px) に マッ チ し て ます <br>": ル 
+etse{ | 
ele.innerHTML = "Cmtn-wtdth:489px) and Cmax-wtdth:899px) に は マッ チ し て ませ ん <br>": ト 
} 


// 調べ る Mediq Query 文 字 列 を 指定 。 TE19 は msMatchMedtq 
flag = window.matchMedtoa( "(mtn-wtdth:Z49px) gnd (max-wtdth : 489px)") .matches: 
tf (flag === true) { 

ele.innerHTML += "Cmtn-width:249px) qnd Cmax-wtdth:4890px) に マッ チ し て ます ": 
+etset 
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ele.tnnerHTML += "Cmtn-width:249px) qnd (max-wtdth:489px) に は マッ チ し て ませ ん ": に 4 
} 
}): 
},。 faqtse): 


ブラ ウザ で index.html を 表示 する と 、 ウィ ンド ウ の 横幅 に 応じ て ペー ジ の 背 景 色 が 変化 する 
CSS フ ァイル が 読み 込ま れ て いま す 。 チェ ッ ク ボタ ン を クリ ッ ク す る と 、 対応 状況 が 表示 きれ ます 。 


展 Sample 
を っ う ぐ Q 


( を 調べ る 
ィ ン ド ウサ イズ を 変更 し た 後に ボタ ンク リッ ク 
Media Query チ ェ ッ ク 


px) and marekih20Omdi は マッ チ し くま せん 
min-width240px) and (max-wdth.480p9 に マッ チ し て ます 





ウィ ンド ウサ イズ を 変化 させ た 後 で 、 再度 チェ ッ ク ボ タン を クリ ッ ク す る と 、 対応 状況 が 表示 さ 
れれ まず 。 





4! 
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(mmmwat 480px) and (max-wdth800px) に マッ チ し て ます 
min-width240px) and (max-width.480p( に は マッ チ し て ませ ん , 
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メデ ィ ア クエ リ が 変化 し た ら 処 理 す る に は 
「window.matchMedia()」 メ ソ ッ ド と 「addListener()」 メソッド を 使う 


メデ ィ ア クエ リ が 変化 し た ら 処 理 す る に は 、「windowmatchMedia( 」 メ ソ ッ ド と | add 
Listener ( ) 」 メ ソ ッ ド を 使い ます 。 パラ メー タ に は 、 マッ チ さ せる クエ リ 文 字 列 を 指定 し ま 
す 。 また 、 メデ イィ アク エリ が 変化 し た 場合 に 処理 する た め 、「addListener() 」 メ ノッ ド を 使 
いま す 。「 addListener() 」 の パラ メー タ に は 、 メデ イア クエ リ が 変化 し た 際 に 呼び 出さ れ 
る 関数 を 指定 し ます 。 た と えば 、 メデ イア クエ リ が 変化 し た 場合 に アラ ー ト ダイ アロ グ を 表 
示す る イベ ント を 設定 する に は 、 次 の よう に し ます 。 


ロロ NEP ロ INT 





var mm = witndow.matchMedia( "(mtn-witdth :489px) qnd (max-wtdth:899px)"): 
mm.addLtstener(functton(){ 

// Medig Query が 変化 し た 場合 の 処理 

glert("Mediag Query が 変わ り ま し た "): 
}): 

「addListener() 」 メ ノッ ド で 設定 し た イベ ント を 解除 する に は 、「removeListener() 」 
メソ ッ ド を 使い ます 。 

な お 、 IE10 で 「matchMedia () 」 メ ノッ ド の 使用 する に は 、「msMatchMedia () 」 の よう 
に 、 ベン ダー プレ フィ ックス を 付け る 必要 が あり ます 。 


関連 項目 ! 


e CSS の メデ ィ ア クエ リ が 変化 し た ら 処 理 する …… ド oro p.438 
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イン ライ ン フ レー ム 人 0: 人 /93.805 
ウィ イン ドウ マフ り 6 ア 
映像 二村 507.68/./96 
映像 形式 な 生 誠 0 導 呈 546 
映像 デー タ た 1C い て と すく て スル いい 5654 
英文 字 で で や や アア アル サヤ て と て た ちん すく の と いい の ()8 0/ 
エス ケー プ 化 主計 (70(6SIV850. ま あり ロワ 
エラ ー 人 68 
エラ ー オ ブ ジ ェクト 計り) 68.693 
エラ ー コ ー ド 全休) 雪 沈 693./34 
エラ ー メ ッ セ ー ジ で で まこ ルイス マト 568./34 
中 や て て YY スタ いこ る ミル まま まい て の 3 てい 450) 
遠近 法 で で て すし に て いい スル 3③5 
円 弧 ーー すす 450 
エン コー ドー ドド oe の 
演算 誤差 誠二 ] / ] 
演算 子 50 4 の 
円 周 率 (5 全便 ] 83 
円 筒 TKY UKTK 55 
エン ボス 加工 068 484 
押下 状態 20 4() ] 
オー ディ オオ ブ ジ ェクト て 608 
オー ディ オ 形 式 0 6 | 寺 2 
オー ディ オ コ ン テキ スト で すす で マサ テン すさ ママ ツ エ サト 85 ] 
オー デイ ィ イオ ソー ス 本 0: 和 信和 6790590: 和 9. 6 85 ] 
オー ディ オデ ー タ 2 人 Re 5 どら 
オー ナー 重信 (0 ] 1 4 
オー/ トー フロ ー 人 (07 [を 6291: あの: 30.93 ら 
オー/ トー ライ ン 人: d05 
オー プン / と EEECECCPHCCCCCEEEEEEHHECL 445 
大 文字 we:f ex 00: あ 68 ちあ 08.908 
オブ ジェ クト 

OH 90.92.104.108.112.117.349 





オブ ジェ クト スト ア ……… ド ドジ 837 
オブ ジェ クト リテラ ル ……0 imim 45 
オフライン …… ド oe フ 59 
親 ノ ソー ド ii ら プ の 
オリ ジン ……… 730.739.743.747.793 
音声 788 
オン ライ ン …… ド iomrrnrrrrrnr 759 
音量 oo 622 
| SN 
階層 関 to フ 76 
解像度 … 層 … ll (ir っ 65 
回 転 …… eoeemeeemeerrr 512.572774 
回 転 体 … の ir 560 
開発 者 リー ル …… ド irerrrn 347 
外部 ファ イル …0 の io 41] 
ガウ ス ぼ か し … oooomeeererreren 49] 
拡大 ii 516 
拡 枯 …ー ビ ーー ドド me 108 
確認 ダイ アロ グ 証人 の フロ 
| SOCOEPCOOCKPO 505.586.909.942.970 
目 SSRGRGOOOOPPPPOPPPPCEPRPPEEPEEPOEEE ] 40 
加算 …… の ーー ドド emrrrrrrn 42 
下 iiii 905 
画像 ……………… 31 1.313.478.687.799 
加速 度 セ ン サ ー… ド … ド (ーーー フ 68 
ii 42 の つの 
LAREEEEEEEEUOOOOCOEEEEEEPCCEEREEERTTECEEEE 940 
角 丸 四角形 …… の rororooeemeer 457 
カメ ラ ……… バ 535.539.667.670.673.676 
画面 … で (li iemmemrer 26] .263.265 
カラ ー ヒ ナー ーー … ド oe 784 
癌 ii 897.899 
1 に ESECEEEEEUOLOOCECEEEEEEEEEE 543 
環境 マッ プ 人 人 6 泊 0(0 め 76 ロ 69 
関数 ……… ド ire 62.64.353 
関数 リテラ ル … rriririroreoreererrerrrrrrrr 45 
ガン マ 補 正 … iihmrrerrrrrr 492 
ヒー EERRRREREPFPPPPEPPPPEPPPCPEEPYTCCYCYETPTT 40)] 
妖 伺 要素 ………… ド irre 885 
守 人 ii 92 
輝度 …※ 氷 …i riorre 486.962 
逆順 … の eo ] 48 
hh 中 計 720EEEEESEEEESEEECCEUCOOOOOCEEEEEEEEEEEE 1 82 
逆 正 接 …… ド oon ] 82 
逆 余 玉 …… ド ドド oe 82 
球体 ……… ド ii 一 546 
行 問 iri 0 ] 
行 拉 え ii d0 ら 
協定 世界 時 …… ひ ……… バ 2 っ 28.230.238.240 
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許可 生か が が の の の る か の の き i9 を な ぶな う 3 の 9 
曲線 2 すい ツタ イト す マ テリ で イイ で も で YY ゲイ で サン イト 453 
虚数 人 08719: 和 186: ] 6 1] 

邑 生地 8Y の 9 人 3 83 
切り 上 げ 0 近 5a ] 4 
切り 捨て 連語 ] 4 
禁 凸 とこ 2 アリス イヤ ンマ と マッ トイ ] 04. ] 06.329 
均等 割り 付け 2 仙人 あい (03 
偶 奇 規則 hi… 和 1ーiーi 研 上 本 …ー…ーー…ー…ー………ー 460 
空白 人: あす の. る ワ ] () 
クッ キー ek いっ 017 どり /.299 
グラ デー ショ ン に し 2 トン 4/6.603 
繰り 返し 条件 2 の あ 二井 35 6 人 あ 和 ロ 4 
繰り 返し 処理 て を ルミ で ルス フル イマ レレ レー 4 
繰り 返し 方 法 人 (人 ロ ] 6 
クリ ッ ク 二天. 講和 聞 070[ あ の: が We: 4 ] 4 
クリ ッ ピ ング 連休 お 芝生 46 ロ 
グリ ニッ ジ 標 準 時 ………………… ボ バ | 229 .244 
グレ ー ス ケー ル YY 1 マイ ンマ ツレ スイ で ルツ 480.955 
グレ ー フ ィ ル タ 人 0) 作る 19!6 9 6 る: まな も 54 
クロ ロー ズリ 4 00 人 の 生生 6 445 
グロ ー/ \【 ル 変数 人 ロ ] 

クロ ス ド キ ュ メ ント メッ セー ジン グ ……… 793 
経過 ミリ 秒 9 て いい 5 シテ すく ツン の の 3 の 
形式 YYCYY2NYKTY02 イ ツル て 5 だ ミタ ツタ とこ ドル アレ と で で サマ で イ で * 4 の 
継承 0 すす が 写生 0": 池 二流 の 
形状 了 1 和 0) 乱 : 当 :( 95 
ゲイ ン ノ ー ド 主人 0 吉光 856 
ゲー ム / い ソ ド 二村 の ] 

桁 数 1 ] 6 ど . ] 63 
検索 07950 の 2 ああ: を ] 34 500.2 ] 6./81 

減算 タン 32 スス カフ イッ ルプ いと イサ で で ケド ーー 4 の 
光源 人生)W96DS26g: 寺 aar 54 の 
コナ >/ 信光 396 あ 人 ] ら の 
誤差 拡散 誠人 497 
誤差 分 散 Ys 人生 49/ 
固定 方 法 0 和光: お 80 ある d ] 1 
子 ノ ー ド 和光 倒す 9 生生 3/0.376 
コピ ー 6 (96961G:0 め 6 69: ま 本 a 4 の 5 の /] 9./ の の 
ミト 9: お WC 和合 天 (305.) あ 導電 49 
AVS 生 和 sw 208.908 
コン テキ スト 生生 442 の 
コン トラ スト せる (808 (6 d65 
コン トロ ー ラ ー わす (人 7(a16189: 和 6196 人 6 6 ど 3.65 
| 環 さ 行 1 
4 EUROUDCOODOOOOYYYY ] 70D 
サイ ズ 人 ど 6 ] 535.592 888 
再生 0 人 6 ] 0.63 ] .639.66 ] 


再生 時 間 WNW: 生か 6 ] ど 64 ] 


再生 状態 0 入 衣 証人 8 6 どら /.656 
再生 速度 ……… 上 ーーー ド ーー…… ド … 629.659 
最大 値 人 が 20 の が 1 70 
牧 度 和合 二 ereiee8 ee 68 
サイ ン 義生 多 . め 当 人 人 宮 折 証人 00:@: 人 (06 ] 8 ど 
削除 

… 53.117.1428.157.810.384.713.744 
座標 2 た マト マー イヤ イシ ンマ マー 404.436.766 
座標 点 人 当家 人 の あ あ あ ( 本 生 全 まる で 5 の 
サダ ディ レク トリ 人 光生 導 "中島 P/ ] () 
差分 0 導入 人 写 tete: の 0 486 
生還 195.280 
三角 関数 生生 和義 2 は ] 1 

三 頂 演算 子 本 生計 な: あ が ま 導 (82 43 etS」 
サジ ウブ プリ ンダ レー ドー…… で うー で 5 ] 

時 イト は 3 は たい て 2 2 ユマ アツ を や O ペ ツヤ イ W どど 7 3 ] . ど 3/7.4 ] 

シー ン 近い 535 
ジェ スチ ャ ー 二天 // の の 
四角 形 (… 上 で … の ( い …( ぬ 和 ヨ l 馬 … の ドド ドー ドド ドー 448 
eS 497 
色相 か 全便 め 人 499.958 
時 刻 …………… 226.230.236.240.24g 
時 差 700 人 当家 の 40 
当 下 げ 人: dB 
四捨五入 ひつ 人 応 他 人 l(l ボ ーー 184 
自然 対数 の て イス アプ サマ イサ イイ ミイ イキ スキ どい 186 
ジャ イロ セン サー CT とく し て サル スン ル ツイ マト ーッ //0 
絆 体 人 居合 06C9 昌 生ま en 94 
充電 状態 義和. り 二天 3 ロ | ロ 1 / 
ee 13 
終了 人 < 還っ 5633.663.756 
縮小 WM 人文 二 語 が が お お 2 な ロ ] 5 
出力 生ま が 人 の 演 0 全 2 の 96 
種類 …1… ド バト バニ ミ (ーーー…ー………… 112.406.680 
条件 の (本 ( や 9 生 人 [時 ] で ] 

条件 分 岐 人 半生 鐘 迷 5 
乗算 家人 和 (人 (0 和 休め 生か あな 4 の 
使用 状況 5 人 の 6594 
小数 入る で おお ある 6 すす むき る の.92 の ため 6 ます の も 3 68 
ジー 栖 KTーー * 163 
上 線 者 人 了 呈 Were 全 ae ま gg 905 
状態 伯 Am 和 enm の Wa 5 の 3 
剰余 隊 タ ei: 人生 あな な は 8 4 の 
初期 化 陸生 な 333 
初期 値 計る の 反 の が 16. 村人 各 る 2 か と ロ 4 
除算 0 人 0 5 4 の 
書体 郎 90 介 移設 woo つの 売 9 人 P6 889 
処理 時 間 を ee 35 の 
シリ アル サー チ 本) 選 生生 り () ] 

円 黒 化 0 近 " き 才 207 和 8 0 49d5 


真 偽 値 あお (人手 寄 仙人 45 
数 値 人 eeet が 人 全 の) hb)WC8 45 1 84 
数 値 型 7 導 まあ! 本 、0 0 ("ゆあ 6: 3 の / 
数 値 専用 いい 335 
数 値 入力 人! 73 入る: /8 ど 
スク ロー ル いす て ママ タス リッ 69.43 1 5 ど 5 
スケ ー リ ング 和合 和 2O8 な 4 5 ]6 
スケ ー ル We da 20 あす (な 80578 ロ // 
スタ イル 2 志和! 46 1 893 
スタ イル シー ト で ナン! し に て いか 880 884 
スタ イル シー トク ラス 和志!6 358 ロ 
スタ イル シー ト プ ロ ティ 9 湯 和 88 ど 
ステ ー タ スコ ー ド 生か Pf すく や キヤ すす で すさ てく て ッッ て 338 
スポ ッ ト ラ イト erg erW:8C 和 (0 人 0! 543.588 
スマ ー ト フォ ン 軍人: の 2 403 
スモ ー ル キャ ッ プ ス 0 和室 896 
スラ イダ ーー 入力 人生 哲人 8 の 
正規 表現 で ツリ で すす て ん た 2 マメ ャ ルト 45 の] 4 の] 56. 1 1 
止 弦 竹生 ] js 
整数 の ため の の (6 9 ] 58 
整数 値 2 ロ 1 
生成 (人 作動 366.368 
止 接 ププ で イイ イル で ドイ と て スタイ) (で ん トリ イス トト FT ] の 
正体 学生 せ で や の に トル すす すす で パャ テシス スス て マス スリ イ トリス てい いい 894 
正 投 影 和 ビッ いし スルスル トミ ルス ロ 4 ] 
正二 十 面体 72 の PS る 060 和 (の の ロ ら / 
西 礎 年 信二 [県 の 2 の 5 .229.235.639 
接続 回 線 な いん これ りら 3 
絶対 座標 系 0 党首 ロ の ] 
絶対 値 時 やす PP すそ で て 1 スツル 1 は つの こい いこ ] /9 
セピア 調 0: な: が! (0 あせ d56 
セレ クタ 電導: の 364 
セレ クト メニ ュー …… ド iii と に る 
ゼロ (ディ ング 人 166 
線 と すす すす や る 2 て て ツク て 2 7 すい セル い 15 4 ] 563.599 
全角 10 人 の (9 
選択 ar sqrereu の も 和 が 979 (0 9 りら 76.433 
セン タリ ング 人: 者 d()3 
増減 値 ーー 7 し イマ 4 
装飾 2 すい いい d04 
拓 語 人 が の 生やす ビン て YY 4 の 9 
総数 2 名和 101 宮本 7061a 6 な か. wuai6te ] 3 ロ 
相対 座標 系 He 20 の 0 ああ: (99 0 4. も る d の ] 
挿 人 人 WU 人:cW: の た 099707 和 87 陣 の: 9 ] りら 8.374 
ゾー ト 本 人 人: 人 09 ] 46 
即時 関数 演者 5 の 
属性 すす ただ や と パコ プ アイチ を すう シテ AA TO この 384 
属性 値 呈す YY や YY で で て YS X ん ま ル 2 エ 7 よ ) 3 ] 00.38 ら 


タイ トル … で oooeererrrrrrrrrre の d4 
人 の 
代入 演算 子 Oimooreooerrrrrr 43 
タイ マー …… ド oo っ 83 
タイ マー ID …0…l 285.288.291.737 
多 人 角形 ーー 455 
タッ チ ドド oo フ 766 
タッ チ 数 …i(…… ド omo フ 64 
タブ ドド ドド 859 
ダブ ルク リッ クー …… reoemoeoemereeerrrrr 414 
単位 …… ド oo 4 
単語 ……… ド ir 99 
タン ジェ ント om 82 
チェ ッ ク ボ ックス ……t "iremrnrrrrre の] 

置換 だ …t…… で で error ら 18.258.376 
チャ ン ネ ル 数 …… ド im 5 ] 

中 央 揃え イル 2 て ミア スス スル いつ d()3 
抽出 に oo 28 
重複 …( に つ om 133 
直線 者 拓 和 泊 乱 江 半 本: 446 
遺 加 …ーー……… 106.142.258.374.386 
通信 状態 …- 償 min 618.647 
通知 … で imirmmm 869.872.874.876 
月 …ーーー ド or らら 5 229.235.239 
に GOGOEERREREERTPEEEEEHAEE 610.639 
定数 …… ド ーー 3 
ディ スク 容量 …l つ つぐ だ oo 69 1 

ディ レク トリ ーー… ド ドド 707.713.716.72 
デー タ ベ ー- ス ドド oo 834 
デー タリ スト … oeoomooeeeemrr 786 
テキ スト eioemoeeererrrrrrrr 601.802 
テキ スト デー タ morememrrrrr 339 
テキ スト ノー ドー ooo 368 
テキ スト ファ イル emem 683 
テキ スト フィ ー ル ド …… ド immnm 433 
沈 示 溢 ト メト リク ス オ ブ ジェ エク ト ………m 473 
テク スチ ャ マッ ピン グ 1 556 
デコ ー- ド …… ド ドド iT 2 
デバ ハッ ガ …… ド ir 347.348 
デバ ッ グ コン ソー ルー ……「irrriim 346.349 
デリ い ッ グ ツ ー ル 時 mm リ ヤセ ド PT や ビバ ナイ マテ イセ ダ サス 347 
デュ アル モニ タダ 和民 導 肖 基 ! 上 (3 の 6 の 
点 着 源 ……iiemi 543 
電話 番号 …… ooo 780 
ii 183 
透視 投 久 …i ひ ro 4 ] 

ドー ナツ 人. め る 459 
ドー ナツ 型 3 GS 村人 8 人 0[ 5() 
トー ラス 1…… ド oemererrrrerrrrrrr 549 
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トド トー ラス 結び げ 目 …… ひ で * ト つの q の 〇 Q 人 ーー…… 5 ] 
4 で cet220is を な ae ka 499.958 
ドキ ュ メ ント オブ ジェ クト モデ ル …… 74.357 
特殊 記号 つ …… 和 ーー に に eee 45 
諾 名 開 数 … 上 …] 和 ] 原 や ……… の …… ド ドー 45 62 
に 2 ウズ イッ の の の oookeoooosocsesrseess ] 7 
ドメイン ot トト 人 eeeooseossssssesess 303 
0 湖 > っ css みな fs 424 862 
ドラ ッ グ S&S ド ロッ プ 人 64 
りー 410 
本 844.847 
2 人 80 あな d5 の 
1 d05 


の っ 科 2: は 








197.614.643 

トド エス リプ ハート マト 362 
ee フ 78 
ーー 329 
な SS 278 
SS 。 599 
や て ヤヤ 462 
ee 359 
owa 46.250 
育 景 画 像 ………………… 912.914.916.918 
章 栖 正和 の っ oocosstsoaosaksos9852 910 
排他 的 論理 和 … び ………ー… バ ーー ドド … 42 178 
が りり ァイル 585 
人 Ro 1] ] 
配列 バード トム トト トード ドド 45.121.136 
本 生生 ミエ ツタ ト es 18 
ea 6 66 
スス YY TS や 444 
と OOCCEYYIPL て YY 303 
パタ ー ン 池村 503 
パッ テリー ii…… ド の 813.815.81 ア 
/ ド 9 デリー レル べべ 族 | ー 和 2 19 
リ Mtueiwaoxoikikat33 和 6 か ion 5 ] 
が 重量 oeeiuRSR が SH な 84 5 ] 
幅 ………… 267.31 1.313.472.537.928 
emm た eKROCGWY7hPG3 62.64 
ーー nH 209 
凍 人 ae らら ] 
os 180 
緒 寺 演算 子 ……… 和 ii の 43 
ピク セル ジー 482 
ビス トリ ー ーー ドー………… 255.257 258 


区 水中 一 鞭 eonet っ 5 
es 903 
日 付 ………・ 224.2258.534.838.242.776 
ビ wjh 神 人 ] 7 ア 
ビ ゅ ド 湾 算 子 ーーー…………ーーー…… 1 7 
ビ W 拓 生 | 123 
ンプ 42 
義 電 組 4 間 … バ ee の 9d の 
非同期 通信 :… び … び つ 上 生 ー バ ーー…… 854 
非同期 通信 オブ ジェ クト ………………… 337 
ee 55.229.235 239 
し mm 27.231.237 24 1 
Fe 79 
人 ea 465 
准将 26 
表示 倍率 … 層 バーーーーーーー…ー ド eee 938 
es 34 
た イン オガ ジテ キタ も mee 79 
ee 696.705.719 
" 深 二 UL eakesee 680.75 
ンク おこ 323.412 
フ 生 で 必要 押 mw…… ロ ーー バー…ーー シ ーー ムー 319 
る RA 583 
ae 889 
得る eeee 523 
得 絆 花 (…… び の の ……… ド ドド oeeooteeettsseo は 8 3 
あき OCTY YY 4 ] 
計 ご OTC 47] 
レー て 1 入 P ア 83 
待 写 付き 左 シ フト ……………ーー ド ーー 42 
符号 付き 右 シ フト 心 ー ビ < ュ mcssss 4 の 2 
情 才 登 し 右 ジ フト ニー* つ KsAasoeserse。 42 
人 eee oe 4 の 
不透明 度 ……… ド … ハ ヘ ト ー…… 463.537.944 970 
MAR 9 1 
RACKSRGENKex の 5 ] 
プ 生 和博 旨 ac 250 
イネ ME ジ ング 1 JST てい eeoeeoosscs 42 54 
Peas 42 
フル スク リー ン … 796.799.802.805.808 
琶 回 線 放 者 303 
ooo 9g 
プロ パテ ィ …100.102.106.110.114.1 17 
OS 交 休 叙 casaveksss<oeaescssbs。 35 の 2 
2 OF ら 27.231.237 24 1 
2 拓 で の 和 和 の 204 
8 還 ラ ァ 届 屋 eo 490 
3 490 
es 543 
Ss 535 


平方 根 …… ド oro 190 
平面 ドド 53 
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